CSS-创建水平条纹

Question

我正在尝试使用如下所示的CSS在现有的div中创建水平条纹背景...

我知道我可以使用重复的图像，但是我正在尝试使用CSS来实现这一点，以便可以动态修改颜色。

这必须是背景，因为内容将进入div。

有人举个例子吗？

Answer 1

我认为这就是您要寻找的。更多详细信息，请参见css-tricks https://css-tricks.com/stripes-css/

.stripe {
  background: linear-gradient( to bottom, #5d9634, #5d9634 50%, #538c2b 50%, #538c2b);
  height: 400px;
  width: 400px;
  background-size: 100% 20px;
}

<div class="stripe">

</div>

Answer 2

您可以使用线性渐变来做到这一点：

html, body{
   height: 100%;
   margin: 0;
}
.canvas{
   width: 100%;
   height: 100%;
   background: repeating-linear-gradient( 
            180deg,
            tomato 40%,
            tomato 50%,
            #fff 50%,
            #fff 100%);

<div class="canvas"></div>

Answer 3

使用repeating-linear-gradient

div {
  width: 100%;
  height: 90vh;
  background: repeating-linear-gradient(
    #464e96,
    #464e96 40%,
    #58d27b 20%,
    #58d27b 60%
  );
}

<div></div>

Answer 4

这是另一个带有渐变的想法，您可以在其中轻松控制条纹的大小：

body {
  margin:0;
  height:100vh;
  
  background:                         /* width:100% height:20px;*/
    linear-gradient(red,red) center /   100%          20px,
    blue;
  background-repeat:no-repeat;
}

Answer 5

请检查以下代码段。您可以使用position属性

来完成此操作

.bg-img{
position:relative;
height:100vh;
background-color:darkblue
}
.divider{
position:absolute;
background-color:green;
height:20px;
width:100%;
top:50%;
transform:translateY(-50%)

}

<div class="bg-img">
<div class="divider"></div>
</div>

Answer 6

.Div1{
background:#464e96;
width:70%;
height:70px;
color:white;
}

.Div2{
background:#58d27b;
width:70%;
height:25px;
color:white;
}

.Div3{
background:#464e96;
width:70%;
height:70px;
color:white;
}

<div class="Div1"> </div>
<div  class="Div2"> </div>
<div  class="Div3"></div>