如何解决从ASP.css文件中后面的代码访问颜色字符串
我的登录屏幕上有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时必须支持外观。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。