gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 02:52:24 25 4
gpt4 key购买 nike

你好 stackoweflow 社区,我需要帮助,我正在创建网站,我需要对半拆分图像,但它们必须是 div。是否可以将背景图像拆分为两个 div? Hese 是 jsfiddle:http://jsfiddle.net/hLt5rguq/6/这是我需要的 html 代码:

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

最佳答案

是的,您只需将其切割成 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

关于html - 将一个背景图像拆分为两个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32779382/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com