CSS使颜色偏向两侧 [英] CSS make colours go off to sides

问题描述

一个模糊的标题，但我不知道如何最好地描述它。

我创建了一个小提琴（ https://jsfiddle.net/h87k8146/ ）。

所以我想要实现的是所有的内容保留在包装内，但背景是.left和.right延伸到填充屏幕的其余部分。

当前CSS

  .wrap {
 width：80％; 
 position：relative; 
 margin：0px auto; 
} 
 .left {
 float：left; 
 width：70％; 
 height：300px; 
 background：＃F4E6D7; 
} 
 .right {
 float：right; 
 width：30％; 
 height：300px; 
 background：＃A2195B; 
} 
  

当前HTML

 < div class =wrap> 
< div class =left>< / div> 
< div class =right>< / div> 
 
< div style =clear：both;>< / div> 
< / div> 
  

我该如何做？

所以想要实现的是这个（粗略的例子）：

http://s2.postimg.org/bqxko5kpl/example.jpg

解决方案

  .left：您可以通过使用几个伪元素， before {
 content：''; 
 position：absolute; 
 height：100％; 
 top：0; 
 right：100％; 
 width：10vw; 
 background：green; 
 z-index：-1 
} 
 .right：after {
 content：''; 
 position：absolute; 
 height：100％; 
 top：0; 
 left：100％; 
 width：10vw; 
 background：red; 
 z-index：-1; 
} 
  

  .wrap {width： 80％;位置：相对; margin：0px auto;}。left {float：left;宽度：70％; height：300px;背景：＃F4E6D7; position：relative;}。left：before {content：''; position：absolute; top：0;高度：100％;右：100％; width：10vw;背景：绿色; z-index：-1} .right {float：right;宽度：30％; height：300px;背景：＃A2195B; position：relative;}。right：after {content：''; position：absolute;高度：100％; top：0;左：100％; width：10vw;背景：红色; z-index：-1;}  

 < div class =wrap> < div class =left>< / div> < div class =right>< / div> < div style =clear：both;>< / div>< / div>  

b
$ b

作为一个附加功能，您可以使伪元素的背景颜色继承自己的父母背景，所以它们不需要每次都重置。

JSfiddle演示

Bit of a vague title, but I wasn't sure of how best to describe it.

I've created a fiddle (https://jsfiddle.net/h87k8146/) of two divs within a wrapper.

So what I want to achieve is have all content remain within the wrapper, but with the background of .left and .right stretching out to fill the rest of the screen.

Current CSS

.wrap {
width:80%;
position:relative;
margin:0px auto;
}
.left {
float:left;
width:70%;
height:300px;
background:#F4E6D7;
}
.right {
float:right;
width:30%;
height:300px;
background:#A2195B;
}

Current HTML

<div class="wrap">
<div class="left"></div>
<div class="right"></div>

<div style="clear:both;"></div>
</div>

How would I go about doing this?

So want I want to achieve is this (rough example):

http://s2.postimg.org/bqxko5kpl/example.jpg

解决方案

You can do this with no additional HTML by using a couple of pseudo-elements, one for each side.

.left:before {
    content:'';
    position: absolute;
    height: 100%;
    top:0;
    right: 100%;
    width: 10vw;
    background: green;
    z-index: -1
}
.right:after {
  content: '';
  position: absolute;
  height: 100%;
  top:0;
  left: 100%;
  width: 10vw;
  background: red;
  z-index: -1;
}

.wrap {
  width: 80%;
  position: relative;
  margin: 0px auto;
}
.left {
  float: left;
  width: 70%;
  height: 300px;
  background: #F4E6D7;
  position: relative;
}
.left:before {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  right: 100%;
  width: 10vw;
  background: green;
  z-index: -1
}
.right {
  float: right;
  width: 30%;
  height: 300px;
  background: #A2195B;
  position: relative;
}
.right:after {
  content: '';
  position: absolute;
  height: 100%;
  top: 0;
  left: 100%;
  width: 10vw;
  background: red;
  z-index: -1;
}

<div class="wrap">
  <div class="left"></div>
  <div class="right"></div>
  <div style="clear:both;"></div>
</div>

As an added feature, you can make the background colors of the pseudo-elements inherit their "parent's" background so they don't need to be reset every time.

JSfiddle Demo

这篇关于CSS使颜色偏向两侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！