'ASP.NET Background-clip: text; Not working

I'm new to .net core and wanted to know if im doing anything wrong or missing anything to get my Background-clip: text; to work, like it does in any other platforms...

I've also tried to debug this problem in multiple web browsers, such as Chrome and Microsoft Egde.

I've tried Background-clip: text; and -Webkit-Background-clip: text; and nothing seems to work. It says that the text value is not valid for Background-clip

Here's my code: 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>

*** Edit: I tried to debug this problem on another text editor, and this code works fine. Is there something wrong with .NET core when it comes to background-clip: text; ? Online code editor : JSFiddle ( https://jsfiddle.net/2m6pwvqo/14/ )

c++sharphtmlcssasp.netweb-site-project


Solution 1:[1]

you are right css syntax for media query, but it's not like that in Razor web page...

you can put extra @ sign and try with below

@@keyframes animate{

}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Htun Thein Win

Related Questions