我有一张16:9(1920 x 1080)的画,上面有一些led灯带.
我的目标是实现渐变色的div以模拟灯光效果,但我只能在图像在背景上是静态的情况下进行.
我已经try 使用background-image
而不是<img>
标签,并try 创建一个包含position relative
和absolute
的包装.此外,我只在css中使用响应值(百分比和视口).
我认为问题在于,object-fit: cover
通过zoom 来调整图像,而div图像则不遵循这一点.
这就是我在这个项目中使用的图像.画上的LED条上已经有一盏粉红色的灯出来了,我正试着在有一个div的粉色灯上面再做一盏新灯.
This green light is the div that I'm trying to put above the pink light:
.cafe-image div.left-light {
background: linear-gradient(
to top,
rgba(0, 0, 0, 0),
rgba(101, 221, 137, 0.671)
);
width: 40%;
height: 30%;
transform: skew(28deg) rotate(15deg);
position: absolute;
top: 8.9%;
left: -4.8%;
}
It is not perfectly positioned, but I'm just trying to keep this green light on the right spot:
...But when I resize the tab, that green light just change his position:
简而言之,不管页面大小如何,我想让这段绿光始终停留在图像的特定点上.
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
overflow: hidden;
}
.cafe-image {
position: relative;
}
.cafe-image img {
object-fit: cover;
width: 100vw;
height: 100vh;
}
.cafe-image div.left-light {
background: linear-gradient(
to top,
rgba(0, 0, 0, 0),
rgba(101, 221, 137, 0.671)
);
width: 40%;
height: 30%;
transform: skew(28deg) rotate(15deg);
position: absolute;
top: 8.9%;
left: -4.8%;
}
</style>
</head>
<body>
<div class="cafe-image">
<img src="https://i.postimg.cc/jq6xMxMC/cafe.jpg"/>
<div class="left-light"></div>
</div>
</body>
</html>