智者不入爱河，建设美丽祖国
Css实现背景遮罩
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode with Softened Background Image</title>
<style>
/* 定义颜色变量 */
:root {
--background-color: #585f63; /* 灰色背景色 */
--text-color: #a1988c; /* 文字颜色 */
--link-color: #1f4977; /* 链接颜色 */
}
/* 全局样式 */
body {
position: relative;
background-color: var(--background-color); /* 背景色 */
background-image: url('https://haowallpaper.com/link/common/file/previewFileImg/15743329476579648'); /* 背景图 */
background-size: cover; /* 背景图全屏覆盖 */
background-blend-mode: multiply; /* 背景图和背景色混合 */
color: var(--text-color); /* 文字颜色 */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* 使用伪元素叠加半透明灰色遮罩层 */
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(88, 95, 99, 0.7); /* 半透明灰色遮罩层 */
pointer-events: none; /* 遮罩层不会影响点击事件 */
z-index: -1; /* 遮罩层在背景之上，内容之下 */
}
/* 链接样式 */
a {
color: var(--link-color);
text-decoration: none;
}
/* 居中内容的容器 */
.content {
text-align: center;
max-width: 600px;
padding: 20px;
background: rgba(0, 0, 0, 0.5); /* 内容区域的半透明背景 */
border-radius: 8px;
}
/* 标题样式 */
h1 {
font-size: 2em;
margin-bottom: 0.5em;
}
/* 段落样式 */
p {
font-size: 1.1em;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="content">
<h1>欢迎来到我的网站</h1>
<p>这是一个带有柔和灰色背景图的示例页面。在暗模式下，背景图片和颜色柔和，护眼效果更佳。</p>
<p><a href="#">点击这里了解更多</a></p>
</div>
</body>
</html>
181
0
已有回复 (0)
暂无回复，快来抢沙发吧