Question

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

我尝试：在之后，但内容仍然落后于它/ /

这是codepen： 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;
}

半图像半色响应背景

2 个答案: