半图半色响应背景

Question

我正在制作具有最大宽度限制的响应式布局。 我被困在这个特定的部分，我试图制作一个左半部分作为背景图像的 div，而另一半是纯色。

我尝试使用 :after，但内容仍留在后面 =/

---

这里是代码笔： http://codepen.io/Skelun/pen/KrkopL

HTML

<div class="full-width half-background" style="background-image:url('http://vwwgroup.com/wp-content/uploads/2016/03/stock-photo-64109767-three-generation-family-enjoying-a-summer-vacation-together_web_new.jpg')">
  <div class="site-width-limit">
    <div class="col-wrapper">
      <div class="col col-1-2">
        Content
      </div>
      <div class="col col-1-2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</div>

CSS

.full-width {
  position:relative;
  width: 100%;
}
.half-background:after {
  background-color: #77AB6E;
  content: "";
  display: block;
  height: 100%;
  position: absolute; top: 0; right: 0;
  width: 50%;
}
.site-width-limit {
  width: 1080px;
  margin: 0 auto;
}
.col-wrapper {display: block}
.col {
  box-sizing: border-box;
  display: inline-block;
  margin-right: 3%;
  vertical-align: top;
  width: 100%;
  /* irrelevant */
  color: #FFF;
  font-family: sans-serif;
  line-height: 30px;
  padding: 30px 0;
}
.col.col-1-2 {width: 48.31%}
.col-wrapper .col:last-child {margin-right: 0}

@media screen and (max-width:1160px) {
  .site-width {
    background: red;
    margin: 0 5%;
    width: 90%;
  }
}

---

请帮帮我。我不知道该怎么办。

谢谢！

Answer 1

<edit>如果要隐藏一半的bg，那么渐变就可以了： http://codepen.io/gc-nomade/pen/GqyxvX

background-image:linear-gradient(to right, transparent 50%, #77AB6E 50%), url('http://vwwgroup.com/wp-content/uploads/2016/03/stock-photo-64109767-three-generation-family-enjoying-a-summer-vacation-together_web_new.jpg');
/* note the behavior of the container within small screens. you may cure the layout via : */
width:100%;
display:table;

.full-width {
  position:relative;
  width: 100%;
}

.site-width-limit {
  width: 1080px;
  margin: 0 auto;
}
.col-wrapper {display: block}
.col {
  box-sizing: border-box;
  display: inline-block;
  margin-right: 3%;
  vertical-align: top;
  width: 100%;
  /* irrelevant */
  color: #FFF;
  font-family: sans-serif;
  line-height: 30px;
  padding: 30px 0;
}
.col.col-1-2 {width: 48.31%}
.col-wrapper .col:last-child {margin-right: 0}

@media screen and (max-width:1160px) {
  .site-width {
    background: red;
    margin: 0 5%;
    width: 90%;
  }
}

<div class="full-width half-background" style="background-image:linear-gradient(to right, transparent 50%, #77AB6E 50%), url('http://vwwgroup.com/wp-content/uploads/2016/03/stock-photo-64109767-three-generation-family-enjoying-a-summer-vacation-together_web_new.jpg');width:100%;display:table;">
  <div class="site-width-limit">
    <div class="col-wrapper">
      <div class="col col-1-2">
        Content
      </div>
      <div class="col col-1-2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</div>

---

<edit>如果是要混色：

您可以使用mix-blend-mode

示例：http://codepen.io/gc-nomade/pen/OXzvXB

.full-width {
  position:relative;
  width: 100%;
}
.half-background:after {
  background-color: #77AB6E;
  content: "";
  display: block;
  height: 100%;
  position: absolute; top: 0; right: 0;
  width: 50%;
  mix-blend-mode:screen;
  pointer-events:none; /*allow to click/select throught */
}
.site-width-limit {
  width: 1080px;
  margin: 0 auto;
}
.col-wrapper {display: block}
.col {
  box-sizing: border-box;
  display: inline-block;
  margin-right: 3%;
  vertical-align: top;
  width: 100%;
  /* irrelevant */
  color: #FFF;
  font-family: sans-serif;
  line-height: 30px;
  padding: 30px 0;
}
.col.col-1-2 {width: 48.31%}
.col-wrapper .col:last-child {margin-right: 0}

@media screen and (max-width:1160px) {
  .site-width {
    background: red;
    margin: 0 5%;
    width: 90%;
  }
}

<div class="full-width half-background" style="background-image:url('http://vwwgroup.com/wp-content/uploads/2016/03/stock-photo-64109767-three-generation-family-enjoying-a-summer-vacation-together_web_new.jpg')">
  <div class="site-width-limit">
    <div class="col-wrapper">
      <div class="col col-1-2">
        Content
      </div>
      <div class="col col-1-2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</div>

或 rgba() 颜色

示例http://codepen.io/gc-nomade/pen/AXxyLE

.full-width {
  position:relative;
  width: 100%;
}
.half-background:after {
  background-color: rgba(119, 171, 110,0.5);
  content: "";
  display: block;
  height: 100%;
  position: absolute; top: 0; right: 0;
  width: 50%;
  pointer-events:none; /*allow to click/select throught */
}
.site-width-limit {
  width: 1080px;
  margin: 0 auto;
}
.col-wrapper {display: block}
.col {
  box-sizing: border-box;
  display: inline-block;
  margin-right: 3%;
  vertical-align: top;
  width: 100%;
  /* irrelevant */
  color: #FFF;
  font-family: sans-serif;
  line-height: 30px;
  padding: 30px 0;
}
.col.col-1-2 {width: 48.31%}
.col-wrapper .col:last-child {margin-right: 0}

@media screen and (max-width:1160px) {
  .site-width {
    background: red;
    margin: 0 5%;
    width: 90%;
  }
}

<div class="full-width half-background" style="background-image:url('http://vwwgroup.com/wp-content/uploads/2016/03/stock-photo-64109767-three-generation-family-enjoying-a-summer-vacation-together_web_new.jpg')">
  <div class="site-width-limit">
    <div class="col-wrapper">
      <div class="col col-1-2">
        Content
      </div>
      <div class="col col-1-2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</div>

Answer 2

您可以为元素应用背景图像和背景颜色，然后通过指定背景位置和背景使背景图像仅占元素宽度的一半背景大小。大致如下：

.half-background {
    background-image: url('http://vwwgroup.com/wp-content/uploads/2016/03/stock-photo-64109767-three-generation-family-enjoying-a-summer-vacation-together_web_new.jpg');
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 50%;
    background-color: #77AB6E;
}