好的,所以我想在另一个有背景图像的div上定位 . image-div具有以下属性:
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image: url('../img/1.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
这看起来像我想要的所有设备 . 但是现在我需要用一个适合图像特定部分的可点击div来覆盖image-div . 让div适合很容易,只需将位置设置为绝对位置并设置顶部,左侧,宽度和高度,但只要我以另一个分辨率/密度显示,div就会消失,这并不奇怪 . 所以我尝试使用%或vh和vw定位,但似乎没有任何工作 .
无论我使用什么设备,分辨率和密度,我如何在图像上定位div?
3 回答
它是
background-position
,background-size
的组合,以及包含div的百分比的偏移量 .将
background-position
保持在特定值,以使图像上的斑点始终在屏幕上 .使用
background-size: cover;
或background-size: contain;
来保持图像(或它的容器)的响应 .如果你在图像的外边缘有两个或多个斑点我建议使用
contain
,但这会在较小的屏幕上大大减少图像尺寸,而你的内部div将保持相当大 .在其他情况下,请使用
cover
进行调整大小 .在这里我创建了一个示例:(我使用Jquery UI使图像可调整大小)
或者查看这个fiddle
您可以在
div
内部使用div
background-image
,但是然后使用%
,而不是px
或绝对值将其放置在div中的任何位置 .