安科网

css条纹背景样式、及方格斜纹背景的实现

CaiKanXP

CaiKanXP

2020-06-13

关注 关注

一、横向条纹
如下代码：

1 background: linear-gradient(#fb3 20%, #58a 80%)

上面代码表示整个图片的上部分20%和下部分20%是对应的纯色，只有中间的部分是渐变色。如果让中间的部分逐渐缩小，当中间部分变为0即上下两种颜色的七点和终点相同是，就没有了渐变而变成了两种颜色的色条:

1 background: linear-gradient(#fb3 50%, #58a 50%);

接下来可以通过设置背景的大小，让背景高度变小并且背景默认为repeat，从而出现条纹状

1 background: linear-gradient(#fb3 50%, #58a 50%);   
2 background-size: 100% 30px;

设计坞https://www.wode007.com/sites/73738.html

我们可以不设定第二个颜色的起始位置，设置为0，则浏览器默认为接着上一个颜色开始：

1 background: linear-gradient(#fb3 30%, #58a 0);   
2 background-size:100% 30px;

这样就形成了一个黄色占30%蓝色占70%的条纹状背景
也可以设置多种颜色，下面设置了三种颜色的条纹：

1 background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%,yellowgreen 0);   
2 background-size: 100% 45px;

 
二、竖向条纹
只需要在linear-gradient方法中加一个前缀即可。注意还需颠倒background-size长宽的设定

1 background: linear-gradient(to rightright, #fb3 50%, #58a 0);     
2 background-size:30px 100%;


三、斜向条纹
可以通过修改background-size的值以及为linear-gradient添加角度来实现斜向的条纹：

1 background: linear-gradient(45deg, #fb3 50%, #58a 0);    //让背景的渐变带有倾斜
2 background-size:30px 30px;   //每一块小组成部分固定宽度和高度

但这样做的结果是只会形成一小块一小块的斜线，而不是整体div的斜线，我们需要以四个小div为一组绘制斜线，添加linear-gradient中的颜色分解：

1 background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a50%, #fb3 0, #fb3 75%, #58a 0);     
2 background-size:30px 30px;

 

四、使用repeat-linear-gradient
对于斜线的背景绘制，使用repeat-linear-gradient方法更有效。使用该方法的时候，设置的颜色变化会自动进行重复直到铺满整个div。实例代码如下：

1 background: repeating-linear-gradient(45deg, #fb3, #58a 30px);

通过这种方式可以任意更改角度，而不会出现上中方法中的调节困难

1 background: repeating-linear-gradient(60deg, #fb3, #fb315px, #58a 0, #58a 30px);

(这种方法其实相当于将size的控制和gradient的控制合到了一起)
 
五、关于颜色的设定
有时我们希望条纹背景的颜色之间是相近的颜色，但是如果手动设定这个颜色的#很不方便，也很难发现要选择什么样的颜色。可以使用如下方法：

background: #58a;     
background-image: repeating-linear-gradient(30deg,     
hsla(0,0%,100%,.1),     
hsla(0,0%,100%,.1)15px,     
transparent 0,transparent 30px);

这种方法的原理是：指定背景中最深的颜色，条文中其他相近色用透明度进行调整

六、综合实例
这里效果图一起放上来了，与下面的样式一一对应：

css条纹背景样式、及方格斜纹背景的实现

公用部分：

.stripes {   
    height: 250px;   
    width: 375px;   
    float: left;   
    margin: 10px;        
    -webkit-background-size: 50px 50px;   
    -moz-background-size: 50px 50px;   
    background-size: 50px 50px; /* 控制条纹的大小 */  
       
    -moz-box-shadow: 1px 1px 8px gray;   
    -webkit-box-shadow: 1px 1px 8px gray;   
    box-shadow: 1px 1px 8px gray;   
}

图1：

.horizontal {   
    background-color: #0ae;   
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));   
    background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
    background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
    background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
}
 
图2：
.vertical {   
    background-color: #f90;   
    background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));   
    background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
    background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
    background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
}


图3：


.picnic {   
    background-color:white;   
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),   
                      -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));   
    background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
                      -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
    background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
                      -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
    background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
                      linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
}


图4：
.picnic {   
    background-color:white;   
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),   
                      -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));   
    background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
                      -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
    background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
                      -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
    background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
                      linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
}


图5：
.angled-135 {   
    background-color: #c16;   
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,   
                            color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),   
                            color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),   
                            color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),   
                            to(transparent));   
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,   
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,   
                        transparent 75%, transparent);   
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,   
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,   
                        transparent 75%, transparent);   
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,   
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,   
                        transparent 75%, transparent);   
}


图6：
.checkered {   
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),   
                      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),   
                      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),   
                      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));   
    background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),   
                      -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),   
                      -moz-linear-gradient(45deg, transparent 75%, #555 75%),   
                      -moz-linear-gradient(-45deg, transparent 75%, #555 75%);   
    background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),   
                      -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),   
                      -o-linear-gradient(45deg, transparent 75%, #555 75%),   
                      -o-linear-gradient(-45deg, transparent 75%, #555 75%);   
    background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),   
                      linear-gradient(-45deg, #555 25%, transparent 25%, transparent),   
                      linear-gradient(45deg, transparent 75%, #555 75%),   
                      linear-gradient(-45deg, transparent 75%, #555 75%);   
}

HTML代码：

<div class="horizontal stripes"></div>  
<div class="vertical stripes"></div>  
<div class="picnic stripes"></div>  
<div class="angled stripes"></div>  
<div class="angled-135 stripes"></div>  
<div class="checkered stripes"></div>

background css颜色 background-size linear-gradient css css样式

CaiKanXP

CaiKanXP

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

css的文字颜色渐变

在css中，有盒子背景图片颜色渐变，但是文字颜色渐变确很少提及，主要还是目前浏览器的支持程度还不高，只有在Safari和chrome能起作用

buttonChan 2020-06-06

相关CSS样式

#full{position: absolute;background:#F7F7F7;left: 0;top: 0;display: none; z-index:2;filter:alpha;opacity :1.0}//遮罩层。5 背景定位 {back

NARUTOLUOLUO 2011-06-24

web前端入门到实战：Css背景定位

同一个标签可以同时设置背景颜色和背景图片，如果颜色和图片同时存在，那么图片会覆盖颜色。那我们用小图片不就得了，这其实也不行，因为我们每个人的屏幕分辨率大小都不同，因此需要一张较大的背景图片来解决上面的问题。

dazhifu 2020-01-17

web前端入门到实战：CSS背景background

专门建立的学习Q-q-u-n⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧。将背景图固定在网页某个位置，一直处于可视区域中，不会随着网页滚动条滚动发生变化，但是会显示在原容器中

CaiKanXP 2020-01-04

css 背景图片路径问题

background-size: 宽 高 | cover 完全覆盖 | contain 宽高自动调节

zhanghaibing00 2020-08-17

提升布局能力！理解 CSS 的多种背景及使用场景和技巧

如果你还了解 CSS background 属性，可以去先 MDN 查看相关的知识。background-clip, background-color, background-image, background-origin, background-po

李鴻耀 2020-08-17

CSS(Cascading Style Sheets)样式更改——过渡、动画

元素从一种样式逐渐改变为另一种的样式。cubic-bezier在cubic-bezie函数中定义自己的值，可能的值是0至1之间的数值

Ladyseven 2020-10-22

左右切换css，html

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="

yaodilu 2020-08-03

如何掌握正则表达式这一开发利器，看这篇就够了

正则表达式具有伟大技术发明的一切特点，它简单、优美、功能强大、妙用无穷。对于很多实际工作来讲，正则表达式简直是灵丹妙药，能够成百倍地提高开发效率和程序质量。表示数字、大小写字母和下划线。表示空白符，包括空格、水平制表符、垂直制表符、换行符、回车符、换页符。

luofuIT成长记录 2020-09-22

测试高手进阶之路：接口测试用好“变量”，重复验证也不怕

在API的测试中，有时候需求是对整个文件进行检验而不是某个特定的值，或者说要对某个特定的值在不同的用例中重复地进行验证。这种状况下，我们最喜欢用的就是变量。可以存取外部数据或定义内部变量，使代码变得简洁、又有可阅读性，同时测试用例结果运行也能保持一致性。代

Mynamezhuang 2020-09-18

webp格式图片转换为jpg

# 这里url是你需要下载的图片地址

jusewe 2020-07-04

C++并发编程实战：如何为多线程性能设计数据结构？

在8.1节中我们看到了在线程间划分工作的一些方法,在8.2节中我们看到了影响代码性能的一些因素。当设计多线程性能的数据结构的时候如何使用这些信息呢?这是在第6章和第7章中处理的很困难的问题,是关于设计可以安全并行读取的数据结构。当为多线程性能设计你的数据结

zhoujiyu 2020-06-28

jQuery基础及选择器（二）

同辈元素选择器$.css;$.css;//a标签带有class属性。<input name="show" type="button" value="显示隐藏的P元素" id="s

89510194 2020-06-27

css 问题集

background-image: url(‘路径‘);background-repeat:no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;bkɡra?nd]详细X. v

MaureenChen 2020-06-12

CSS3的过渡效果，使用transition实现鼠标移入/移出效果

在css中使用伪类虽然实现了样式的改变，但由于没有过渡效果会显得很生硬。以前如果要实现过渡，就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡功能，就可以从一组样式平滑的切换到另一组样式。下面鼠标移入后，按钮背景色会慢慢地变成黄色。鼠标离开，过

Phoebe的学习天地 2020-06-07

css常用的简写技巧_css background简写、css border 简写、css font属性简写等

css样式中有很多简写方式，比如：设置背景，字体，边框，盒子等。我们都可以把css代码合并为一行，这篇文章将总结有哪些属性支持css简写。font:normal small-caps bold 14px/1.5em ‘宋体‘,arial,verdana;d

淡风wisdon大大 2020-06-06

在右键菜单中添加\"在此处打开CMD窗口\"

删除这些注册表项时，将该文件中的以下内容进行修改，然后重新合并到注册表即可。

xiaobater 2020-06-01

字体渐变

<div>关于<span style="background: linear-gradient; -webkit-background-clip: text;color:transparent;">我们</

xtuhcy 2020-05-20

我发现了7个关于 CSS backgroundImage 好用的技巧

背景图像可能是我们所有前端开发人员在我们的职业生涯中至少使用过几次的CSS属性之一。大多数人认为背景图像不可能有任何不寻常的地方，但经过研究，答案并非如此。所以本文收集了七个我认为最有用的技巧，并创建了一些代码示例。如果我想在背景中添加一张以上的图片怎么办

AlisaClass 2020-05-18

Windows 10右键添加 \"在此处打开命令窗口\" 菜单

第二种是在 桌面/文件夹窗口中/选中文件夹上按住Shift键点击右键，同时显示“在此处打开命令窗口”和“在此处打开Powershell窗口”两个选项，如图：。新建一个文本文件，编码格式保存为ANSI，否则显示中文会乱码，修改后缀为reg格式，命名为Open

赵家小少爷 2020-05-16
CaiKanXP

CaiKanXP

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号