组合框阴影和文本渐变
Combining Box Shadow and Text Gradient
是否可以将文本渐变与框阴影相结合?
请参阅示例图像以了解我想要实现的目标。Example-Image
我已经实现了渐变,但是我之后添加的框阴影出现在前景中。
我该如何解决?
h2 {
display: inline-block;
background-image:linear-gradient(90deg,#c93718 0%,#035b34 30%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
box-shadow: inset 0px 30px white;
}
很想得到一些帮助!
谢谢!
(对不起我的英语)
尝试添加一个 div,然后您可以调整位置来解决您的问题。
h2 {
display: inline-block;
background-image:linear-gradient(90deg,#c93718 0%,#035b34 30%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
z-index: 999999;
position: absolute;
}
div{
background-color: gray;
height: 30px;
width: 140px;
position: absolute;
top: 22px;
}
<h2>This is Demo</h2>
<div></div>
您可以尝试多个背景:
h2 {
display: inline-block;
font-size:50px;
color:transparent;
background-image:
linear-gradient(90deg,#c93718 0%,#035b34 30%),
linear-gradient(#ccc,#ccc);
-webkit-background-clip:
text,
padding-box;
background-clip:
text,
padding-box;
-webkit-text-fill-color: transparent;
}
<h2>A title here</h2>
由于已知错误,这在 Firefox 上不起作用:https://bugzilla.mozilla.org/show_bug.cgi?id=1571244
作为 Firefox 的替代品,考虑伪元素:
h2 {
display: inline-block;
font-size: 50px;
color: transparent;
background-image: linear-gradient(90deg, #c93718 0%, #035b34 30%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
}
h2::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: #ccc;
}
<h2>A title here</h2>
是否可以将文本渐变与框阴影相结合? 请参阅示例图像以了解我想要实现的目标。Example-Image
我已经实现了渐变,但是我之后添加的框阴影出现在前景中。 我该如何解决?
h2 {
display: inline-block;
background-image:linear-gradient(90deg,#c93718 0%,#035b34 30%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
box-shadow: inset 0px 30px white;
}
很想得到一些帮助!
谢谢! (对不起我的英语)
尝试添加一个 div,然后您可以调整位置来解决您的问题。
h2 {
display: inline-block;
background-image:linear-gradient(90deg,#c93718 0%,#035b34 30%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
z-index: 999999;
position: absolute;
}
div{
background-color: gray;
height: 30px;
width: 140px;
position: absolute;
top: 22px;
}
<h2>This is Demo</h2>
<div></div>
您可以尝试多个背景:
h2 {
display: inline-block;
font-size:50px;
color:transparent;
background-image:
linear-gradient(90deg,#c93718 0%,#035b34 30%),
linear-gradient(#ccc,#ccc);
-webkit-background-clip:
text,
padding-box;
background-clip:
text,
padding-box;
-webkit-text-fill-color: transparent;
}
<h2>A title here</h2>
由于已知错误,这在 Firefox 上不起作用:https://bugzilla.mozilla.org/show_bug.cgi?id=1571244
作为 Firefox 的替代品,考虑伪元素:
h2 {
display: inline-block;
font-size: 50px;
color: transparent;
background-image: linear-gradient(90deg, #c93718 0%, #035b34 30%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
}
h2::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: #ccc;
}
<h2>A title here</h2>