纯css3实现条纹背景方法(水平,垂直,倾斜)

2018-09-06CSS3110
  • 详情内容
  • 留言点评

2016531113058955.png

以上这些并不是背景图,而是由CSS样式代码实现。在现代标准浏览器中,我们通过CSS3的两个属性,一个是linear-gradient,即线性渐变,另一个是background-size,用来确定渐变的尺寸,就能显示出不同方向的条纹效果。今天我们就来详解CSS制作Web页面条纹背景样式的技巧,需要的朋友可以参考下。

1、横向条纹

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

上面代码表示整个图片的上部分20%和下部分20%是对应的纯色,只有中间的部分是渐变色。如果让中间的部分逐渐缩小,当中间部分变为0即上下两种颜色的七点和终点相同是,就没有了渐变而变成了两种颜色的色条。接下来可以通过设置背景的大小,让背景高度变小并且背景默认为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;

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

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

background-size:30px 100%;

3、斜向条纹
可以通过修改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;

4、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的控制合到了一起)

5、颜色设定
有时我们希望条纹背景的颜色之间是相近的颜色,但是如果手动设定这个颜色的#很不方便,也很难发现要选择什么样的颜色。可以使用如下方法:

background: #58a;     

background-image: repeating-linear-gradient(30deg,     

hsla(0,0%,100%,.1),     

hsla(0,0%,100%,.1)15px,     

transparent 0,transparent 30px);

这种方法的原理是:指定背景中最深的颜色,条文中其他相近色用透明度进行调整。目前最新版本的FireFox/Opera/Safari/Chrome浏览器以及使用同样的内核的国产浏览器都已能够支持gradient渐变样式。实际上CSS渐变与photoshop中的渐变功能是一样的原理,网页样式渐变也可以有无限种可能,以下是一组完整示例:

<body>
    <div class="patterns pt1"></div>
    <div class="patterns pt2"></div>
    <div class="patterns pt3"></div>
</body>
<style>
          .patterns {
            width: 200px;
            height: 200px;
            float: left;
            margin: 10px;
            box-shadow: 0 1px 8px #666;
        }
        .pt1 {
            background-size: 50px 50px;
            background-color: #0ae;
            background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
            background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
        }
        .pt2 {
            background-size: 50px 50px;
            background-color: #0ae;
            background-image: -webkit-linear-gradient(to right, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
            background-image: linear-gradient(to right, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
        }
        .pt3 {
            background-size: 50px 50px;
            background-color: #0ae;
            background-image: -webkit-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);

        }
</style>

欢迎点评!也可以是问题反馈和建议

支持Ctrl+Enter提交
暂无留言,快抢沙发!
0

真心很赞,必须打赏!嗯,以资鼓励~

点此打赏

99%看过的人还会看

老铁,别说没提醒你,双11期间实体店消费,先用手机支付宝搜索“7629723”可以抢红包,玩法已限时升级,红包种类和金额都更嗨咯