我的登录屏幕有3个文件:login.aspx
,login.aspx.cs
,login.aspx.cs
在page_load
方法上,我从当前系统接收到一些数据,其中包括主题颜色字符串(例如#003B67)。
在我的。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文件中的一种变量)
CSS文件不由ASP.NET处理(除非您重新配置您的整个HTTP管道,这通常是个坏主意),所以简短的答案是“不”。
。。。然而,CSS自定义属性存在解决方案!
在.aspx
页中,理想情况下是在中(希望您使用的是
元素之后:
<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:
属性,并直接在.css
文件中使用color:var(--theme-color);
!
因此,您的应该包含以下内容:
<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
值被重复两次(首先是一个文字十六进制颜色,然后是一个var(--theme-color)
),以确保与不支持CSS自定义属性的旧浏览器(即IE11-我认为您必须支持IE11-似乎您正在使用ASP.NET WebForms)的向下兼容。