CSS 遮罩层,背景渐变
CSS 遮罩层,背景渐变
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="basic.css">
</head>
<body>
<div class="masked-element">
<div class="content">这里是需要遮罩的内容</div>
</div>
<div class="container">
<div class="content">正常内容</div>
</div>
</body>
</html>
basic.css
.masked-element {
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
/*background: url('http://www.vipsoft.com.cn/vipsoft/img/logo/classic/light.png') no-repeat center center;*/
/*background-size: cover;*/
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite; /*背景渐变*/
}
.masked-element::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/*background: rgba(0, 0, 0, 0.6); !* 遮罩颜色和透明度 */
}
.content {
position: relative; /* 确保内容在遮罩之上 */
z-index: 1;
color: white; /* 遮罩下的文字颜色 */
}
本文来自博客园,作者:VipSoft 转载请注明原文链接:https://www.cnblogs.com/vipsoft/p/18243808
分类:
Vue
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
2023-06-12 自然语言处理 Paddle NLP - 词向量应用展示
2021-06-12 Maven 引用jar包冲突 Intellij 查找排除JAR包的依赖关系(Maven Helper)
2012-06-12 Oracle win 下expdp 导出数据出错 ORA-06512: 在 "SYS.UTL_FILE", line 536