如何解决如何从子类中删除CSS过滤器?
我是CSS的新手,我在看这个漂亮的代码:
https://jsfiddle.net/heckz72g/
这里的问题是我已将字体“ color”定义为“ blue”,但是过滤器出现在文本上,不再是蓝色。它根据所应用的过滤器而变化。如何使文本颜色仅变为蓝色?
这是小提琴的结果:
这就是我想要的:
请告诉我如何删除文本(“某些文本”)上的css过滤器并使所有文本颜色变为“蓝色”?
HTML:
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
CSS:
body {
text-align: center;
}
a {
position: relative;
width: 100%;
padding-top: 25.92%;
display: block;
background-size: 100% 100%;
font-family: 'luckiest guy';
font-size: 28px;
margin-bottom: 20px;
text-decoration: none;
color: blue;
}
a.background-button {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/323909/yellow-shadow.png);
}
a.background-button:after {
content: attr(title);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/323909/yellow-top.png);
transition: all 0.3s;
display: flex;
justify-content: center;
align-items: center;
}
a.background-button:hover:after {
-webkit-transform: translate(2.5%,10%);
transform: translate(2.5%,10%);
text-shadow: 2px 2px 1px white;
color: black;
}
.button-wrapper {
width: 355px;
display: inline-block;
margin: 20px;
}
.button-wrapper:nth-child(2) a {
-webkit-filter: hue-rotate(36deg);
filter: hue-rotate(36deg);
}
.button-wrapper:nth-child(3) a {
-webkit-filter: hue-rotate(72deg);
filter: hue-rotate(72deg);
}
.button-wrapper:nth-child(4) {
-webkit-filter: hue-rotate(108deg);
filter: hue-rotate(108deg);
}
.button-wrapper:nth-child(5) {
-webkit-filter: hue-rotate(144deg);
filter: hue-rotate(144deg);
}
.button-wrapper:nth-child(6) {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.button-wrapper:nth-child(7) {
-webkit-filter: hue-rotate(216deg);
filter: hue-rotate(216deg);
}
.button-wrapper:nth-child(8) {
-webkit-filter: hue-rotate(216deg);
filter: hue-rotate(216deg);
}
.button-wrapper:nth-child(9) {
-webkit-filter: hue-rotate(252deg);
filter: hue-rotate(252deg);
}
.button-wrapper:nth-child(7) {
-webkit-filter: hue-rotate(288deg);
filter: hue-rotate(288deg);
}
.button-wrapper:nth-child(8) {
-webkit-filter: hue-rotate(324deg);
filter: hue-rotate(324deg);
}
解决方法
只需删除所有这些内容:
.button-wrapper:nth-child(2) a {
-webkit-filter: hue-rotate(36deg);
filter: hue-rotate(36deg);
}
.button-wrapper:nth-child(3) a {
-webkit-filter: hue-rotate(72deg);
filter: hue-rotate(72deg);
}
.button-wrapper:nth-child(4) {
-webkit-filter: hue-rotate(108deg);
filter: hue-rotate(108deg);
}
.button-wrapper:nth-child(5) {
-webkit-filter: hue-rotate(144deg);
filter: hue-rotate(144deg);
}
.button-wrapper:nth-child(6) {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.button-wrapper:nth-child(7) {
-webkit-filter: hue-rotate(216deg);
filter: hue-rotate(216deg);
}
.button-wrapper:nth-child(8) {
-webkit-filter: hue-rotate(216deg);
filter: hue-rotate(216deg);
}
.button-wrapper:nth-child(9) {
-webkit-filter: hue-rotate(252deg);
filter: hue-rotate(252deg);
}
.button-wrapper:nth-child(7) {
-webkit-filter: hue-rotate(288deg);
filter: hue-rotate(288deg);
}
.button-wrapper:nth-child(8) {
-webkit-filter: hue-rotate(324deg);
filter: hue-rotate(324deg);
}
您可以通过以下方式控制文本的颜色:
a {
color: red;
}
如果您要更改背景颜色,建议不要使用背景图像。
,现在,检查是否可以使用
body {
text-align: center;
}
a {
position: relative;
width: 100%;
padding-top: 25.92%;
display: block;
background-size: 100% 100%;
font-family: 'luckiest guy';
font-size: 28px;
margin-bottom: 20px;
text-decoration: none;
}
.background-button {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/323909/yellow-shadow.png);
}
.background-button:after {
content: attr(title);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/323909/yellow-top.png);
transition: all 0.3s;
display: flex;
justify-content: center;
align-items: center;
}
.background-button:hover:after {
-webkit-transform: translate(2.5%,10%);
transform: translate(2.5%,10%);
text-shadow: 2px 2px 1px white;
}
.button-wrapper {
width: 355px;
display: inline-block;
margin: 20px;
}
.button-wrapper:nth-child(2) a {
-webkit-filter: hue-rotate(36deg);
filter: hue-rotate(36deg);
}
.button-wrapper:nth-child(3) a {
-webkit-filter: hue-rotate(72deg);
filter: hue-rotate(72deg);
}
.button-wrapper:nth-child(4) {
-webkit-filter: hue-rotate(108deg);
filter: hue-rotate(108deg);
}
.button-wrapper:nth-child(5) {
-webkit-filter: hue-rotate(144deg);
filter: hue-rotate(144deg);
}
.button-wrapper:nth-child(6) {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.button-wrapper:nth-child(7) {
-webkit-filter: hue-rotate(216deg);
filter: hue-rotate(216deg);
}
.button-wrapper:nth-child(8) {
-webkit-filter: hue-rotate(216deg);
filter: hue-rotate(216deg);
}
.button-wrapper:nth-child(9) {
-webkit-filter: hue-rotate(252deg);
filter: hue-rotate(252deg);
}
.button-wrapper:nth-child(7) {
-webkit-filter: hue-rotate(288deg);
filter: hue-rotate(288deg);
}
.button-wrapper:nth-child(8) {
-webkit-filter: hue-rotate(324deg);
filter: hue-rotate(324deg);
}
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
<div class="button-wrapper">
<a class="background-button" href="#" title="SOME TEXT"></a>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。