首页文章导航工具教程 栏目
提交

关闭

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

时间: 2018-03-19阅读: 3859标签: 背景

一、横向条纹
如下代码：

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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


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

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

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

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);

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


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


公用部分：

.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>



站长推荐

1.云服务推荐: 国内主流云服务商，各类云产品的最新活动，优惠券领取。地址：阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台，如果你有流量，可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/521

上一页:  程序猿跳槽季，为什么你的薪水总升不上去？【转载】下一页:  css实现div多边框_box-shadow模拟多边框、outline描边实现

关闭

Css背景定位

同一个标签可以同时设置背景颜色和背景图片，如果颜色和图片同时存在，那么图片会覆盖颜色，1.在CSS中有一个叫做background-position：属性，就是专门用来控制背景图片的位置2.格式：background-position:值1 值2；

css sprites（精灵图）如何使用？

CSS Sprites是一种性能优化技术，一种网页图片应用处理方式：将多个图像组合成单个图像文件以在网站上使用的方法，以提高性能；也被称为css 精灵图。

CSS3做出条纹大背景

实现不等宽背景条纹；实现不等宽背景条纹；草地背景；斜条纹背景；单色斜条纹背景（利用透明度及transparent）；格子衫背景；波点背景；棋盘背景

H5移动端点击出现背景蓝色框的解决方案

当我们在移动端给元素添加点击事件时我们会发现点击时元素会默认出现一个背景色框或者高亮显示 ，如何去掉蓝色边框？是用来解决在安卓上的点击出现篮框问题

css sprite

提高首评加载速度，除了要将所有使用的图片,资源文件压缩，添加懒加载，还需要合并页面中使用到的所有图标到一张大图里，减少请求次数，所有图标放到一张大图上，使用background定位

css背景图充满整个屏幕

我想让整个界面有一个背景图片，自然想到的是在body上加background，加载背景图 ；背景图垂直、水平均居中；当内容高度大于图片高度时，背景图像的位置相对于viewport固定 ；

CSS box-sizing与background-clip解决背景显示范围的问题

过去在学习CSS的时候，首要任务就是要理解“box model”，因为box model是CSS里头很重要的模型概念，描述了padding、margin、border与content的空间定位

CSS3制作文字背景图

文字带上渐变色，或者说让文字透出图片。这些效果 CSS 属性也可以完成。 使用 mix-blend-mode 能够轻易实现，我们只需要构造出黑色文字，白色底色的文字 div ，叠加上图片，再运用 mix-blend-mode 即可，简单原理如下：

css设置全屏背景图，background-size 属性

在写主题样式的时候经常会碰到用背景图铺满整个背景的需求，这里分享下使用方法,以图片bg.jpg为例,最简单，最高效的方法 CSS3.0 归功于css3.0新增的一个属性background-size

canvas 生成页面水印，MutationObserver 控制节点防修改

网上浏览的时候。看到有些页面会有背景的水印效果，使用canvas实现了个类似的效果，可以作为背景，也可以作为页面前景覆盖，防止网页信息的截图

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!