div的一半背景颜色

时间:2018-09-30 01:39:59

标签: html css bootstrap-4

如何使用CSS(div的半背景颜色)进行这种设计:查看图片

2 个答案:

答案 0 :(得分:3)

在body元素上使用pyparsing

html, body{ height:100% } 

body{
  background: linear-gradient(green 40%, transparent 40%) no-repeat;
}

或使用box-shadow(需要px单位而不是%):

html, body{ height:100%; margin:0; } 

body{
  box-shadow: 0 200px 0 -100px green inset;
}

答案 1 :(得分:0)

<div style="background-color: #007700; height: 200px; width: 100%"></div>

这是您的绿色背景...刚放入该div-包含内容的另外三个div,将它们定位为绝对值并边距边玩:

Ready DEMO。如果您不是CSS的新手,可能很难理解,但是google功能强大。

<div style="background-color: #007700; height: 200px; width: 100%">
   <div style="margin-left: 1%" class="bubu">1</div>
   <div style="margin-left: 33%" class="bubu">2</div>
   <div style="margin-left: 65%" class="bubu">3</div>
</div>

和CSS:

 .bubu {
    position: absolute;
    height: 300px;
    width: 30%;
    margin-top: 50px;
    margin-right: 15px;
    box-shadow: 0 0 10px 3px rgba(100, 100, 100, 0.7);
    border-radius: 10px;
    background-color: white;
    text-align: center;
    padding-top: 10px;
  }

*如果需要固定宽度,则可以像素为单位设置宽度。