如何为多个div设置背景图像? [英] How can I set a background image for multiple divs?

问题描述

我正在使用四个div来显示一些服务:

I am using four divs to display some services:

我想对这四个图像使用背景图像，如本例所示:

I want to use a background image for the four images like in this example:

http://de.wix.com/website-template/view/html/1326?originUrl=http％3A％2F％2Fde.wix.com％2Fwebsite％2Ftemplates％2Fhtml％2Fall％2F1& bookName = create-master-new& galleryDocIndex = 0& category = all& metaSiteId =

我该怎么办?分辨率应该具有响应性，所以我不能使用裁切工具来裁切图像.

How can I do it? The resolution should be responsive so I can't use the crop tool to cut the image.

推荐答案

这是更新的 演示

Here is the updated Demo

这实际上是一个带有 position:absolute 的游戏.您获得的示例站点也以相同的方式进行操作.它实际上是< img> 标签，而不是背景

it's actually a play with position: absolute. the example site you are given also doing the same way. its actually <img> tag, not background

这是代码:

.container{
	max-width: 600px;
	position: absolute;
	top: 10px;
}
img{
	max-width: 600px;
}
.divider{
	width: 10px;
	position: absolute;
	top: 0px;
	height: 100%;
	background: white;
}
.one{
	left: 150px;
}
.two{
	left: 300px;
}
.three{
	left: 450px;
}

<div class="container">
	<img src="https://static.wixstatic.com/media/b2c0a7_a44d01e99b665e19effb29e4fc36ded3.jpg/v1/fill/w_880,h_500,al_c,q_85/b2c0a7_a44d01e99b665e19effb29e4fc36ded3.jpg" alt="">
	<div class="divider one"></div>
	<div class="divider two"></div>
	<div class="divider three"></div>
</div>

这篇关于如何为多个div设置背景图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！