将一个背景图像拆分为两个div

Question

你好stackoweflow社区，我需要帮助，我创建网站，我需要在一半的分割图像，但他们必须是divs。是否有可能将背景图像分成一半是两个div？灰褐色是的jsfiddle：http://jsfiddle.net/hLt5rguq/6/ 下面是HTML代码，我怎么需要它看起来像：

<div class="wallpaper"> 
    <div class="left-side"></div> 
    <div class="right-side"></div> 
</div> 

Answer 1

是的，你只需要将它切成2个元素并放置背景。我用.wallpaper，显示上一个图像

* { 
 
    box-sizing: border-box; 
 
} 
 
.wallpaper { 
 
    background: transparent url("http://intrawallpaper.com/wp-content/uploads/awesome-rain-wallpaper_0.jpg") no-repeat scroll 0% 0%; 
 
    width: 500px; 
 
    height: 200px; 
 
    float: left; 
 
    margin-top: 10px; //spacing 
 
} 
 
.left-side { 
 
    float: left; 
 
    background: transparent url("http://intrawallpaper.com/wp-content/uploads/awesome-rain-wallpaper_0.jpg") no-repeat scroll 0 top; 
 
    width: 250px; 
 
    height: 200px; 
 
    margin-right: 10px; //show cutting edge 
 
} 
 
.right-side { 
 
    float: left; 
 
    background: transparent url("http://intrawallpaper.com/wp-content/uploads/awesome-rain-wallpaper_0.jpg") no-repeat scroll -250px top; 
 
    width: 250px; 
 
    height: 200px; 
 
}

<div class="left-side"></div> 
 
<div class="right-side"></div> 
 
<div class="wallpaper"></div>

JSFiddle

Answer 2

试试这个CSS出这应该解决您的问题

.left-side, .right-side { 
    width: 50%; 
    float: left; 
    display: inline-block; 
    height: inherit; 
    background-color: transparent; 
} 

Answer 3

是的，我们可以用css做到这一点，这里是使用使用一个图像分成两个div的例子下面的代码

* { box-sizing: border-box; } 
.wallpaper { 
    width:1024px; 
    height:683px; 
    display:block; 
} 
.left-side{ 
    background: transparent url("http://intrawallpaper.com/wp-content/uploads/awesome-rain-wallpaper_0.jpg") no-repeat left top; 
    width:50%; 
    display:inline-block; 
    height:100%; 
    float:left; 
} 
.right-side{ 
    background: transparent url("http://intrawallpaper.com/wp-content/uploads/awesome-rain-wallpaper_0.jpg") no-repeat right top; 
    width:50%; 
    display:inline-block; 
    height:100%; 
}