ASP.NET 背景剪辑:文字;不工作
ASP.NET Background-clip: text; Not working
我是 .net 核心的新手,想知道我是否做错了什么或遗漏了什么让我的 Background-clip: text;
正常工作,就像在任何其他平台上一样...
我也尝试在多个网络浏览器中调试这个问题,例如 Chrome 和 Microsoft Egde。
我已经尝试了 Background-clip: text;
和 -Webkit-Background-clip: text;
,但似乎没有任何效果。它说文本值对 Background-clip
无效
这是我的代码:Style.css
.text-container p {
-webkit-text-fill-color: transparent;
font-size: 150px;
background-image: url("https://s31.postimg.cc/yaze1agjv/abstract-background-canvas-249798.jpg");
background-repeat: repeat-x;
background-position: bottom;
background-size: cover;
animation: animate 30s linear infinite;
text-align: center;
margin-top: 17%;
text-transform: uppercase;
font-weight: 900;
width: 100%;
height: 100%;
-webkit-background-clip: text;
background-clip: text;
}
@keyframes animate {
0% {
background-position: left 0px top 10px;
}
40% {
background-position: left 800px top 10px;
}
}
Index.cshtml
<html class="backimg">
<body>
<p class=text-container> Hello World!</p>
</body>
</html>
*** 编辑:我试图在另一个文本编辑器上调试这个问题,这段代码工作正常。 .NET core 在 background-clip: text; 方面有问题吗? ?在线代码编辑器:JSFiddle ( https://jsfiddle.net/2m6pwvqo/14/ )
你是对的 css 媒体查询的语法,但它不像 Razor 网页中那样...
你可以加个@符号试试下面的
@@keyframes 动画{
}
我是 .net 核心的新手,想知道我是否做错了什么或遗漏了什么让我的 Background-clip: text;
正常工作,就像在任何其他平台上一样...
我也尝试在多个网络浏览器中调试这个问题,例如 Chrome 和 Microsoft Egde。
我已经尝试了 Background-clip: text;
和 -Webkit-Background-clip: text;
,但似乎没有任何效果。它说文本值对 Background-clip
这是我的代码:Style.css
.text-container p {
-webkit-text-fill-color: transparent;
font-size: 150px;
background-image: url("https://s31.postimg.cc/yaze1agjv/abstract-background-canvas-249798.jpg");
background-repeat: repeat-x;
background-position: bottom;
background-size: cover;
animation: animate 30s linear infinite;
text-align: center;
margin-top: 17%;
text-transform: uppercase;
font-weight: 900;
width: 100%;
height: 100%;
-webkit-background-clip: text;
background-clip: text;
}
@keyframes animate {
0% {
background-position: left 0px top 10px;
}
40% {
background-position: left 800px top 10px;
}
}
Index.cshtml
<html class="backimg">
<body>
<p class=text-container> Hello World!</p>
</body>
</html>
*** 编辑:我试图在另一个文本编辑器上调试这个问题,这段代码工作正常。 .NET core 在 background-clip: text; 方面有问题吗? ?在线代码编辑器:JSFiddle ( https://jsfiddle.net/2m6pwvqo/14/ )
你是对的 css 媒体查询的语法,但它不像 Razor 网页中那样...
你可以加个@符号试试下面的
@@keyframes 动画{
}