如何在响应背景上使用div

Question

最近，我正在寻找一种方法：

我有一些持有背景图片的html。由于background-size: cover;规则，此图片具有响应性/可在调整大小时进行缩放。 但在这个Html（有position: relative规则）中我有一些div应该有宽度，高度和位置来覆盖其中一台笔记本电脑（在我的图像顶部图像中）

问题是，即使我使用百分比或vw或vh规则，在调整大小后，此元素将永远不适合笔记本电脑（在图像屏幕2和3上）。

所以我的问题是 - 这可能吗？如果是的话，我可以使用所有可能的技术（javascript，css3）来存档此效果。此外，div还应更改尺寸以适合其中一台笔记本电脑。

感谢您的建议。

背景大小100％100％可以压缩图像。

Answer 1

您可以尝试将%用于background-size属性

示例：

div{
   background-size:100% 100%;
   background-repeat: no-repeat;
}

您还可以尝试background-attachment属性

以下是CSS3 background-size Property

的详细信息

Answer 2

您可以像这样尝试使用（不使用背景图像）

＆＃13;

＆＃13;

y = y+x

＆＃13;

ul{
	list-style: none;
}
ul li{
	display: inline-block;
	width: 200px;
	height: 200px;
	overflow: hidden;
	position: relative;
}
ul li img{
	position: absolute;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
}
ul li img:hover{
	transform: scale(1.5,1.5);
}

＆＃13;

＆＃13;

＆＃13;