div的一半背景颜色 [英] Half Background color for div

问题描述

如何使用CSS(div的半背景颜色)进行这种设计?

How can I do this kind of design using CSS, the Half-background color for div?

推荐答案

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

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

It's your green background... just put into that div - another three div-s with content, position them absolute and play with margins:

准备演示.如果您不是CSS的新手，可能很难理解，但是google功能强大.

Ready DEMO. It maybe hard to understand, if you are novice in CSS, but google is powerful.

<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;
  }

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

*width could be set in pixels, if you need fixed width.

这篇关于div的一半背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！