Question

我正在尝试覆盖两个div元素，底层有一个背景，覆盖不能有一个，因为后面会有一个背景图像。
我希望在覆盖div后面的地方切断基础文本我找到的唯一方法是将background-color: white;设置为覆盖div，如上所述，这是不可能的。
任何提示/解决方案如何实现这一目标？

<div style="background-color:red;z-index:1;overflow:hidden;position:absolute;left:262px;top:222px;width:191px;height:48px;">
This is a TEST text.
</div>
<div style="border:1px solid black;z-index:2;overflow:hidden;position:absolute;left:152px;top:177px;width:199px;height:156px;">
Top Element
</div>

Answer 1

这对你有用吗？基本上，我添加了第三个div，背景颜色为白色，当图像进入下面的div时，你可以将它的显示设置为无。这主要只是一个想法，它可能适用于较低的div。

<html>
<head>
    <style>
        #botDiv{
            background-color:red;
            z-index:1;
            overflow:hidden;
            position:absolute;
            left:262px;
            top:222px;
            width:191px;
            height:48px;
        }
        #topDiv{
            border:1px solid black;
            z-index:2;
            overflow:hidden;
            position:absolute;
            left:152px;
            top:177px;
            width:199px;
            height:156px;
        }
        #interSectingDiv{
            background-color:#fff;
            position:relative;
            top:26px;
            left:109px;
            overflow:hidden;
            width:191px;
            height:48px;
            display:block;
        }
    </style>
</head>
<body>
<div id="botDiv">
This is a TEST text.
</div>
<div id="topDiv">
Top Element
    <div id="interSectingDiv"></div>
</div>
</body>
</html>

[更新] 另一个想法是，您可以将较低div的宽度缩短它从较高div中消耗的空间量，并将其放置在较高div的右边缘，直到图像进入（您很可能必须在你的css中使用由某种形式的javascript触发的动画。）

如何隐藏没有背景颜色的div的基础文本？

1 个答案: