问题描述
我的登录屏幕上有3个文件：Login.aspx，Login.aspx.cs，LoginStyle.css
在Page_Load方法中，我从当前系统接收到一些数据，其中包括主题颜色作为字符串（例如＃003b67 ）。 / p>
在我的.css文件中，我定义了3种样式规则，应使用此颜色。
.linkButtonPassword:hover {
color: #38d39f;
}
.login-input-div.focus > .login-faItem > i {
color: #38d39f;
}
.login-input-div:before,.login-input-div:after {
content: '';
position: absolute;
bottom: -2px;
width: 0%;
height: 2px;
background-color: #38d39f;
transition: .4s;
}
所以我的问题是，有没有一种方法可以用后面的代码中的颜色替换当前的颜色字符串“＃38d39f”，而无需在.aspx文件中定义样式？ （是否可以在我的css文件中访问一种变量）
解决方法
ASP.NET不会处理CSS文件（除非您重新配置整个HTTP管道，这通常是个坏主意），因此简短的回答是“否”。
...但是存在使用CSS自定义属性的解决方案！
第1部分：
在您的.aspx页中，最好是在<head>中（我希望您使用的是<asp:ContentPlaceHolder？），请在当前的{ 1}}元素：
<link rel="stlyesheet">您可能会说这与直接用<style type="text/css">
:root {
--theme-color: <%= this.customColor %>;
}
.linkButtonPassword:hover,.login-input-div.focus > .login-faItem > i,.login-input-div:before,.login-input-div:after {
color: var(--theme-color);
}
</style>
覆盖属性是一样的事情-但区别在于您现在可以从上方删除<%= %>属性并使用color: 直接在您的color: var(--theme-color);文件中！
第2部分：
所以现在您的.css应该包含以下内容：
<head>您的<style type="text/css">
:root {
--theme-color: <%= this.customColor %>;
}
</style>
文件应包含以下内容：
.css .linkButtonPassword:hover {
color: #38d39f;
color: var(--theme-color);
}
.login-input-div.focus > .login-faItem > i {
color: #38d39f;
color: var(--theme-color);
}
.login-input-div:before,.login-input-div:after {
content: '';
position: absolute;
bottom: -2px;
width: 0%;
height: 2px;
background-color: #38d39f;
background-color: var(--theme-color);
transition: .4s;
}
的值被重复两次（首先是文字的十六进制颜色，然后是color），以确保与不支持CSS自定义属性（例如IE11-我认为您在使用ASP.NET WebForms时必须支持外观。