css 在固定图像容器上滚动图像覆盖

ie3xauqp 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(128)

我有一个案例，我想做一个图像覆盖出售的项目。我使用php生成的div和透明的png背景，它绝对位于锚定容器中，在产品图像上方，这是HTML代码：

<div class="termekkep-holder eladva ">
<a href="http://tango-antik.hu/herendi-porcelan-szololevel-alaku-asztali-kinalo-talka-a-kozkedvelt-viktoria-mintaval/" title="Herendi porcelán “szőlőlevél” alakú">
<div class="eladott"></div> 
<img src="http://tango-antik.hu/wp-content/uploads/2015/10/Tango-fotok-_02241-250x250.jpg" class="attachment-termekkep wp-post-image" alt="Tango-fotok-_0224">          
</a>    
</div>

关于CSS：

.eladott {
background: url(img/eladva.png) no-repeat top center transparent;
    display: block;
    position: absolute;
    background-size: 100%;
}

.termekkep-holder .eladott {
background-position: center center;
    width: 230px;
    height: 230px;
}

它工作得很好，直到父div变大，需要滚动，然后覆盖div停留在屏幕空间，而不是在图像上方。
你知道怎么解决吗？
这是链接：http://tango-antik.hu/porcelanok/（尝试滚动产品的内部部分）

css

来源：https://stackoverflow.com/questions/33507670/scrolling-image-overlay-on-fixed-image-container

1条答案

按热度按时间

relj7zay1#

只需将position: relative;添加到.termekkep-holder：

.termekkep-holder {
    position: relative;
}

其思想是，当您将position: absolute;设置为一个元素，并且希望它坚持其父元素，那么您需要显式地设置父元素的position: relative;，即使它是默认值。下面是一个演示，但我添加了一个外部<div>，只是为了模仿滚动：

.eladott {
background: url("http://tango-antik.hu/wp-content/themes/Tangobolt-template/img/eladva.png") no-repeat top center transparent;
    display: block;
    position: absolute;
    background-size: 100%;
}

.termekkep-holder .eladott {
background-position: center center;
    width: 230px;
    height: 230px;
}

.termekkep-holder {
    position: relative;
}

<div style="height: 300px; overflow-y: scroll;">
<div class="termekkep-holder eladva ">
<a href="http://tango-antik.hu/herendi-porcelan-szololevel-alaku-asztali-kinalo-talka-a-kozkedvelt-viktoria-mintaval/" title="Herendi porcelán “szőlőlevél” alakú">
<div class="eladott"></div> 
<img src="http://tango-antik.hu/wp-content/uploads/2015/10/Tango-fotok-_02241-250x250.jpg" class="attachment-termekkep wp-post-image" alt="Tango-fotok-_0224">          
</a>    
</div>
<br/><br/><br/><br/><br/><br/><br/><br/>
</div>

赞(0）回复(0）举报 2023-06-25

我来回答

css 在固定图像容器上滚动图像覆盖

1条答案

相关问题

热门标签

最新问答