Question

我负责制作的网站带有水印，出于我的理智，我将其编码为单独的对象而不是背景。（据记录，即使更改为每个父元素的背景，此问题仍然存在。）我最近不得不向该站点添加一个可滚动页面，这立即破坏了一切。我必须将html和body元素的高度设置为auto，以便它们可以捕获子元素，但是现在水印被卡住了，显示器一次可以显示的页面的任何百分比。设置为自动时，图像将最大化，但仍不会一直延伸到底部。令人讨厌的是，只有屏幕宽于高时，问题才可见。

以下是影响图片的HTML：

<html>
<body>

<section>
     <img src="Buttons/HomeWatermark3.png">
</section>

</body>
</html>

和CSS：

html { 
    width: 100%;
    height: auto; }

html body {
    margin:0;
    padding: 0; }

body {
    background-color: #003678;
    height: 100%;
    width: 100%; }

/* --------------------- Watermark ------------------- */
section img {
    z-index: -20;
    opacity: 0.1;
    position: absolute;
    right:0;
    height: 100%;
    width: auto;}

该如何使图像与新版式配合？

更新：我将图像放大了两倍，但在自动模式下仍然存在相同的问题，因此我认为图像没有达到极限。

编辑：我忘了提一下，如果将水印的高度设置为自动，则它会在所有非繁琐的页面上溢出，这有点烂。

再次编辑：这是我在jsfiddle中的更多代码，显示了图像限制。故意溢出，我只需要图像即可匹配。

Answer 1

在正文中添加position:relative;。

https://jsfiddle.net/xka8Lq30/

适合图片，但未定义父级高度

1 个答案: