将一张背景图片拆分为两个 div答案

【问题标题】：Split one background image into two divs将一张背景图片拆分为两个 div
【发布时间】：2016-10-05 20:40:49
【问题描述】：

你好 stackoweflow 社区，我需要帮助，我正在创建网站，我需要将图像分成两半，但它们必须是 div .. 是否可以将 background-image 分成两半以成为两个 div？ Hese 是 jsfiddle：http://jsfiddle.net/hLt5rguq/6/ 这是我需要的 html 代码：

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

【问题讨论】：

用一些图像编辑器（甚至油漆）剪切你的图像并将背景图像设置为left-side和right-side怎么样？

标签： html css

【解决方案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

【讨论】：

【解决方案2】：

是的，我们可以使用 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%;
}

【讨论】：

【解决方案3】：

试试这个 CSS 应该可以解决你的问题

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

【讨论】：