css条纹背景效果

时间：6年前阅读：5292

条纹背景

【双条纹背景】

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

background-size: 100% 30px;

　　CSS标准规定：如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值

　　因此，第二个色标值可以设置为0

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

background-size: 100% 30px;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
    <style type="text/css">
	.tt{
	width: 200px;
    height: 70px;
    background: linear-gradient(#fb3 50%, #58a 0);
    background-size: 100% 20px;
	}
    </style>
</head>
<body>
    <div>
    </div>
    <div class="tt"></div>
</body>
</html>

【多条纹背景】

　　如果要创建超过两种颜色的条纹，也是很容易的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
    <style type="text/css">
	.tt{
	width: 200px;
    height: 70px;
    background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
    background-size: 100% 24px;
	}
    </style>
</head>
<body>
    <div>
    </div>
    <div class="tt"></div>
</body>
</html>

【垂直条纹】

　　垂直条纹的代码跟水平条纹几乎是一样的，差别主要在于需要在开头加上一个额外的参数来指定渐变的方向，然后把background-size的值颠倒一下

【45度斜向条纹】

　　思路如下：单个贴片包含四个条纹，只有这样才能做到无缝拼接

background:linear-gradient(45deg,#fb3 25%, #58a 0,#58a 50%,#fb3 0, #fb3 75%, #58a 0);

background-size: 30px 30px;

　　使用循环渐变更加简单

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
    <style type="text/css">
	.tt{
	    width: 200px;
    height: 70px;
    background: linear-gradient(45deg,#fb3 25%, #58a 0,#58a 50%,#fb3 0, #fb3 75%, #58a 0);
    background-size: 30px 30px;
	}
    </style>
</head>
<body>
    <div>
    </div>
    <div class="tt"></div>
</body>
</html>

【任意角度斜向条纹】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
    <style type="text/css">
	.tt{
	width: 200px;
    height: 70px;
    background: repeating-linear-gradient(60deg,#fb3, #fb3 15px, #58a 0,#58a 30px);
	}
    </style>
</head>
<body>
    <div>
    </div>
    <div class="tt"></div>
</body>
</html>

【同色系条纹】

　　在大多数情况下，我们想要的条纹图案并不是由差异极大的几种颜色组成的，这些颜色往往属于同一色系，只是在明度方面有着轻微的差异

background:repeating-linear-gradient(60deg,#79b, #79b 15px, #58a 0,#58a 30px);

　　但是，这两种颜色之间的关系在代码中并没有体现出来。此外，如果想要改变这个条纹的主色调，甚至需要修改四处

　　一种更好的方法是不再为每种条纹单独指定颜色，而是把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹

background: #58a;

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

　　现在只需要修改一个地方就可以改变所有颜色了。还得到了一个额外的好处，对于那些不支持css渐变的浏览器来说，这里的背景色还起到了回退的作用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
    <style type="text/css">
	.tt{
	width: 200px;
    height: 70px;
    background: #58a;
    background-image: repeating-linear-gradient(30deg,hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0,transparent 30px);
	}
    </style>
</head>
<body>
    <div>
    </div>
    <div class="tt"></div>
</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

css条纹背景效果

网友评论