CSS make colours go off to sides

问题

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

回答1:

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

回答2:

Try this

.wrap {
  width: 100%;
  position: relative;
  margin: 0px auto;
}
.left {
float: right;
  width: 70%;
  height: 300px;
  background: #F4E6D7;
border: 1px solid #aaa;
}
.right {
float: left;
  width: 70%;
  height: 300px;
  background: #A2195B;
border: 1px solid #aaa;
}

.rightWrapper{
position:absolute;
width: 70%;
background: #F4E6D7;
height: 300px;
}

.leftWrapper{
   position:absolute;
width:30%;
height:300px;
right: 0px;
background: #A2195B; 
}

<div class="wrap">
<div class="rightWrapper">
    <div class="left">Left content here</div>
</div>
<div class="leftWrapper">
    <div class="right">Right content here</div>
</div>
</div>

Working JSFiddle here https://jsfiddle.net/h87k8146/6/

回答3:

(UPDATED) Like this? (Maybe is not you want..if not please make it more clear, thanks.

CSS

body{
    background: #f4e6d7;
    background: -moz-linear-gradient(left,  #f4e6d7 0%, #f4e6d7 65%, #a2195b 65%, #a2195b 100%) ;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f4e6d7), color-stop(65%,#f4e6d7), color-stop(65%,#a2195b), color-stop(100%,#a2195b)) ;
    background: -webkit-linear-gradient(left,  #f4e6d7 0%,#f4e6d7 65%,#a2195b 65%,#a2195b 100%) ;
    background: -o-linear-gradient(left,  #f4e6d7 0%,#f4e6d7 65%,#a2195b 65%,#a2195b 100%) ;
    background: -ms-linear-gradient(left,  #f4e6d7 0%,#f4e6d7 65%,#a2195b 65%,#a2195b 100%) ;
    background: linear-gradient(to right,  #f4e6d7 0%,#f4e6d7 65%,#a2195b 65%,#a2195b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4e6d7', endColorstr='#a2195b',GradientType=1 );
    background-repeat:no-repeat;
    background-size:100% 150px;

}

.wrap {
    width:80%;
    position:relative;
    margin:0px auto;
    overflow: hidden;
}
.left {
    float:left;
    width:70%;
    height:300px;

}
.right {
    float:right;
    width:30%;
    height:300px;

}

DEMO HERE

来源：https://stackoverflow.com/questions/29845451/css-make-colours-go-off-to-sides

标签

html

css

position