css - 如何隐藏没有背景色的div的基础文本?

原文 标签 css html background stylesheet

我正在尝试叠加两个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>


overlaying divs

最佳答案

这对您有用吗?基本上,我添加了带有白色背景色的第三个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触发的动画)。

关于css - 如何隐藏没有背景色的div的基础文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21001674/

相关文章:

jquery - 定位第三个子项,然后将DIV嵌套在其中

html - 使用CSS创建样式化的html header

jquery - 在jquery中使用addClass函数时如何在文本上添加颜色悬停

html - 在jQuery Mobile中对齐复选框和文本输入的问题

php - 如何通过SQL在PHP中创建动态表

html - CSS:在标题上换行背景色

html - 手机网站上的字体

javascript - 如何使用javascript函数重用HTML代码块?

html - 在流体宽度的SVG形状上重复图案吗?

crash - MPMusicPlayerController:当 iPod 应用程序在后台终止时,iPod 停止发送通知