css - 在我的叠加层上叠加文本
问题描述
我有一个覆盖问题。如果我的叠加层打开,我想显示一个文本。如果用户单击,则覆盖应该消失并且应该可以看到正文内容。
但是如何在叠加层上制作文字或图片?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#overlay {
position: fixed;
display: none;
-webkit-filter:blur(4px);
filter:blur(4px);
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:rgba(255,255,255, 0.9);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="overlay" onclick="off()">
<div id="text">Overlay Text</div>
</div>
<body onload="on()">
sguhdulfghldusfhgsdufg
</body>
<script>
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
</script>
</body>
</html>
解决方案
基本上,您只需要更改覆盖文本的颜色即可使其可见。但是您遇到的问题也blur
将适用于您的子元素并且文本不可读。
为了使其工作,您需要创建一个包含 的子元素,blur
以确保它不适用于覆盖文本。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:rgba(255,255,255, 0.9);
z-index: 2;
cursor: pointer;
}
#blur {
width: 100%;
height: 100%;
-webkit-filter:blur(4px);
filter:blur(4px);
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="overlay" onclick="off()">
<div id="background"></div>
<div id="text">Overlay Text</div>
</div>
<body onload="on()">
sguhdulfghldusfhgsdufg
</body>
<script>
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
</script>
</body>
</html>
推荐阅读
- papi - 将 PAPI 库用于性能指标
- python - 如果添加默认值,django 字段是否会更新可为空的列?
- c++ - C++ 中何时引入了在 if 语句中声明变量的能力?
- python - 为什么 Cartopy 上的海洋填充功能不适用于我的地图?
- php - 更新谷歌推送通知通道的过期时间
- r - Annotate 缩短了以 0 结尾且不能用粗体书写的数字
- devops - 使用无服务器框架部署时找不到 Python
- minio - MinIO如何复制压缩对象
- visual-studio-code - VS Code Extension如何调用C++动态依赖库
- python - Matplotlib 轮廓:设置颜色条的范围(不是颜色图的范围)