隐藏标题后面的所有文本透明但不是图像
Posted
技术标签:
【中文标题】隐藏标题后面的所有文本透明但不是图像【英文标题】：Hide all text behind a header transparent but not images 【发布时间】：2021-03-10 13:20:58 【问题描述】：嗨！
我需要你的帮助来隐藏 所有 文字 隐藏 透明 header (example) 原因不可读.. 图片没有问题，只有文字.. 我想保持标题透明.. .float-menu.containerbackground:rgba(255, 255, 255, 0.4);
我找不到解决办法..
谢谢你..！
#myHeader
width: 100%;
text-align: center;
background: rgba(255, 255, 255, 0.4);
position: fixed;
height: 50px;
top: 150px;
body
height: 2000px;
background: red;
#paragraf
padding-top: 200px;
<body>
<div id="myHeader">
This is my header element.
</div>
<p id="paragraf"><b>Note:</b> I want to hide all text</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>【问题讨论】：
请在此处添加代码，以便我们查看问题所在 像这样，例如jsfiddle.net/vkusq9zo 【参考方案1】：对你的 CSS 和 html 做了一些改动：
添加了一个带有.wrapper 类的div，并将所有p 标签移入其中。
然后将此 CSS 样式添加到包装器中：
.wrapper
position: absolute;
top: 50px;
overflow: scroll;
max-height: calc(100vh - 50px);
解释：
为包装添加了绝对位置并设置top: 50px（标题的高度，这样它们就不会相互重叠。
溢出设置为滚动，这样p标签内容就不会在标题后面可见。
并将 max-height 设置为 calc(100vh - 50px)，从整个视口高度 (100vh) 中减去 50px（标题高度）
我相信这就是您正在寻找的：
#myHeader
width: 100%;
text-align: center;
background: rgba(255, 255, 255, 0.4);
position: fixed;
height: 50px;
top: 0;
body
background: red;
margin: 0;
.wrapper
position: absolute;
top: 50px;
overflow: scroll;
max-height: calc(100vh - 50px);
<body>
<div id="myHeader">
This is my header element.
</div>
<div class="wrapper">
<p id="paragraf"><b>Note:</b> I want to hide all text</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</div>
</body>【讨论】：
谢谢你的提议，但我认为它就像一个不透明的标题一样。我只想隐藏文本而不是图像。？我们可以看到标题下的图像，但看不到正文的文字..希望有人能帮助我..谢谢 你检查过代码吗？标题背景为白色，不透明度为 0.4，因此标题上可见粉红色，尝试更改正文背景，您将看到标题的透明度，文本将不可见，图像将可见 是的，我检查了你的代码，但如果我在内容中有一张图片，标题也会隐藏图片。jsfiddle.net/8gmqhkjo/1 要实现这一点，您还需要 javascript 并且很难实现这一点 我不太了解 javascript.. 但我认为它是可能的 DOM 的 navigationur..以上是关于隐藏标题后面的所有文本透明但不是图像的主要内容，如果未能解决你的问题，请参考以下文章