將一個背景圖像拆分爲兩個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%; 
}