div固定在另一个div的img图片中,而不是背景图片,这个div要跟着图片移动
时间: 2024-02-23 09:01:30 浏览: 22
如果您想让一个div元素固定在另一个div中的img图片上,并且这个div元素要跟着图片移动,可以使用JavaScript来实现。具体的做法是:
1. 首先,在外层的div元素中插入一个img标签和一个内层的div元素。
2. 使用JavaScript获取img元素的位置和大小,然后将这些信息应用到内层div元素的样式中。
3. 监听窗口的resize和scroll事件,当这些事件发生时,重新计算内层div元素的位置和大小,并更新其样式。
下面是一个示例代码,演示如何在一个img图片上固定一个div元素,并让这个div元素跟着图片移动:
```html
<div class="outer-div">
<img src="your-image-url.jpg" alt="your image">
<div class="inner-div"></div>
</div>
```
```css
.outer-div {
position: relative;
}
img {
display: block;
width: 100%;
height: auto;
}
.inner-div {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 200px;
height: 200px;
background-color: rgba(255, 255, 255, 0.5);
}
```
```javascript
const outerDiv = document.querySelector('.outer-div');
const img = outerDiv.querySelector('img');
const innerDiv = outerDiv.querySelector('.inner-div');
function updateInnerDiv() {
const imgRect = img.getBoundingClientRect();
const outerDivRect = outerDiv.getBoundingClientRect();
innerDiv.style.width = `${imgRect.width}px`;
innerDiv.style.height = `${imgRect.height}px`;
innerDiv.style.top = `${imgRect.top - outerDivRect.top}px`;
innerDiv.style.left = `${imgRect.left - outerDivRect.left}px`;
}
window.addEventListener('resize', updateInnerDiv);
window.addEventListener('scroll', updateInnerDiv);
updateInnerDiv();
```
在上面的代码中,我们首先使用JavaScript获取了外层div元素、img元素和内层div元素,然后定义了一个updateInnerDiv函数来更新内层div元素的位置和大小。在updateInnerDiv函数中,我们使用getBoundingClientRect方法获取了img元素和外层div元素的位置和大小,然后通过计算得到了内层div元素的位置和大小,并将这些信息应用到内层div元素的样式中。
最后,我们监听了窗口的resize和scroll事件,当这些事件发生时,调用updateInnerDiv函数重新计算内层div元素的位置和大小,并更新其样式。在页面加载完成后,我们也调用了一次updateInnerDiv函数,以确保内层div元素的位置和大小能够正确地初始化。