(编辑:我在CodePen中添加了第二个例子)
与已经给出的答案类似,但增加了一个避免渐变的部分:
http://codepen.io/anon/pen/EyNwOq
将其设置为重复的线性渐变背景,但为了避免渐变并且只获得两种单独的颜色,请按以下方式进行设置(尝试调整设置以获得所需的条纹宽度和颜色):
background: repeating-linear-gradient( -45deg, #000 0px, #000 5px, #333 6px, #333 11px, #000 12px);
可以使用background:repeating-linear-gradient来实现。
div {
height:100px;
width:100px;
background:
repeating-linear-gradient( -45deg,#000, #333 1px,#000 1px);
}
linear-gradient
,并制作小框,这样可以轻松地改变条纹的宽度(在我的示例中为10px乘以10px),然后形成如下的背景:
body {
text-align: center;
}
h4 {
padding-top: 150px;
}
.gradient-box {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 320px;
height: 320px;
border: none;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgb(255, 255, 255);
-o-text-overflow: clip;
text-overflow: clip;
background: -webkit-linear-gradient(-45deg, rgba(84,84,84,0) 0, rgba(84,84,84,0) 40%, rgba(29,29,29,1) 40%, rgba(0,0,0,1) 59%, rgba(58,58,58,0) 59%, rgba(63,63,63,0) 100%), -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), -webkit-linear-gradient(-225deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), rgba(33,29,29,1);
background: -moz-linear-gradient(135deg, rgba(84,84,84,0) 0, rgba(84,84,84,0) 40%, rgba(29,29,29,1) 40%, rgba(0,0,0,1) 59%, rgba(58,58,58,0) 59%, rgba(63,63,63,0) 100%), -moz-linear-gradient(135deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), -moz-linear-gradient(315deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), rgba(33,29,29,1);
background: linear-gradient(135deg, rgba(84,84,84,0) 0, rgba(84,84,84,0) 40%, rgba(29,29,29,1) 40%, rgba(0,0,0,1) 59%, rgba(58,58,58,0) 59%, rgba(63,63,63,0) 100%), linear-gradient(135deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), linear-gradient(315deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), rgba(33,29,29,1);
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 10px 10px;
background-size: 10px 10px;
}
<div class="gradient-box">
<h4>Awesome striped background</h4>
</div>
background-size
和linear-gradient
颜色,以适应你想要实现的内容。