如何解决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,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,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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。