html - CSS:如何使混合模式具有透明背景,仅影响/被剪辑到(文本)内容?
问题描述
这是我的代码。我认为我想要实现的目标相当明显 - 我想删除文本后面的黑色背景,但是,当我简单地删除黑色背景 css 时,渐变层只会显示,因为它没有被剪辑到文本中。
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background:url('https://wallpapersite.com/images/pages/pic_w/16658.jpg') no-repeat center center fixed;
background-size: cover;
}
.neon {
position: relative;
overflow: hidden;
filter: brightness(200%);
}
.text {
background-color: black;
color: white;
font-size: 100px;
font-weight: bold;
font-family: sans-serif;
text-transform: uppercase;
position: relative;
user-select: none;
}
.text::before {
content: attr(data-text);
position: absolute;
color: white;
filter: blur(0.02em);
mix-blend-mode: difference;
}
.gradient {
position: absolute;
background: linear-gradient(45deg, #00f7ff, #f545d7, #0085ff, #6945f5, #005aff);
top: 0;
left: 0;
right: 0;
bottom: 0;
mix-blend-mode: multiply;
}
.spotlight {
position: absolute;
top: -100%;
left: -100%;
right: 0;
bottom: 0;
background:
radial-gradient(
circle,
white,
transparent 25%
) center / 25% 25%,
radial-gradient(
circle,
white,
black 25%
) center / 12.5% 12.5%;
animation: light 5s linear infinite;
mix-blend-mode: color-dodge;
}
@keyframes light {
to {
transform: translate(50%, 50%);
}
}
<div class="neon">
<span class="text" data-text="NIGHT SKY">NIGHT SKY</span>
<span class="gradient"></span>
<span class="spotlight"></span>
</div>
无论如何,我已经尝试了一些东西,比如弄乱一些mix-blend-modes
,添加一些剪切路径等,但无法得到任何接近工作的东西。我认为它应该(?)是可能的,但如果不是,我明天会尝试其他一些方法(比如将文本转换为 png 并使用background-clip
属性)
解决方案
另一个mix-blend-mode
会修复它。在这种情况下使用lighten
删除您不想要的黑色部分:
html {
background:#fff; /* this is needed to make sure the blending works fine (any color will do the trick) */
}
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: url('https://wallpapersite.com/images/pages/pic_w/16658.jpg') no-repeat center center fixed;
background-size: cover;
}
.neon {
position: relative;
overflow: hidden;
filter: brightness(200%);
mix-blend-mode:lighten; /* here */
}
.text {
background-color: black;
color: white;
font-size: 100px;
font-weight: bold;
font-family: sans-serif;
text-transform: uppercase;
position: relative;
user-select: none;
}
.text::before {
content: attr(data-text);
position: absolute;
color: white;
filter: blur(0.02em);
mix-blend-mode: difference;
}
.gradient {
position: absolute;
background: linear-gradient(45deg, #00f7ff, #f545d7, #0085ff, #6945f5, #005aff);
top: 0;
left: 0;
right: 0;
bottom: 0;
mix-blend-mode: multiply;
}
.spotlight {
position: absolute;
top: -100%;
left: -100%;
right: 0;
bottom: 0;
background: radial-gradient( circle, white, transparent 25%) center / 25% 25%, radial-gradient( circle, white, black 25%) center / 12.5% 12.5%;
animation: light 5s linear infinite;
mix-blend-mode: color-dodge;
}
@keyframes light {
to {
transform: translate(50%, 50%);
}
}
<div class="neon">
<span class="text" data-text="NIGHT SKY">NIGHT SKY</span>
<span class="gradient"></span>
<span class="spotlight"></span>
</div>
推荐阅读
- vb.net - 如何获取 PictureBox 中图像资源的名称?
- sql - MS SQL for PostgreSQL 中 DECLARE 和 SET 的替代方法是什么?
- makefile - 通过 make 安装 3rd 方依赖项
- javascript - react js Array.prototype.filter() 期望在箭头函数的末尾返回一个值
- java - Firebase 实时数据库的隐形后台服务
- javascript - 网络请求在反应本机获取中失败
- stm32 - QSPI 协议中 DDR 与 SDR 相比有何优势?
- awk - 将一个数字与一列文本文件相乘
- sql - 在 BigQuery 中每天计算帐户余额
- android - 无法在单个 appium xml 文件中运行多个类