Question

我正在尝试在加载DOM后更改h1中的文本以将其颜色更改为透明，模糊效果有效，但不是颜色效果。

以下是我的代码部分：

＆＃13;

<script type="text/javascript">
    $(document).ready(function() {
        $('#maintext h1').addClass('blur-text');
    });
</script>

＆＃13;

#main h1
    font-family: Neucha
    font-size: 14em
    color: $sbbqyellow
    margin-top: 35vh
    -webkit-transform: rotate(-10deg) skew(-10deg, 0)
    -moz-transform: rotate(-10deg) skew(-10deg, 0)
    -ms-transform: rotate(-10deg) skew(-10deg, 0)
    -o-transform: rotate(-10deg) skew(-10deg, 0)
    transform: rotate(-10deg) skew(-10deg, 0)

.blur-text
    color: transparent
    text-shadow: 0 0 64px rgba(243, 203, 74, 1)

＆＃13;

<div id="main">
    <div id="maintext" class="center">
        <h1>Sundsvall BBQ</h1>
    </div>
    <div id="footer" class="center">
        <h3>Norrlands största grillevent</h3>
    </div>
</div>

＆＃13;

Answer 1

您的#main h1 css规则的higher specificity比.blur-text规则高，因此前者会覆盖后者。

只需将其设置为.blur-text规则具有更高的指定性

#maintext h1.blur-text {
   color:transparent;
}

演示

$(document).ready(function() {
  $('#maintext h1').addClass('blur-text');
});

#main h1 {
    font-family: Neucha;
    font-size: 14em;
    color: yellow;
    margin-top: 35vh;
    -webkit-transform: rotate(-10deg) skew(-10deg, 0);
    -moz-transform: rotate(-10deg) skew(-10deg, 0);
    -ms-transform: rotate(-10deg) skew(-10deg, 0);
    -o-transform: rotate(-10deg) skew(-10deg, 0);
    transform: rotate(-10deg) skew(-10deg, 0);
}

#maintext h1.blur-text {
    color: transparent;
    text-shadow: 0 0 64px rgba(243, 203, 74, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div id="maintext" class="center">
    <h1>Sundsvall BBQ</h1>
  </div>
  <div id="footer" class="center">
    <h3>Norrlands största grillevent</h3>
  </div>
</div>

Answer 2

您的CSS选择器的特异性各不相同。＆＃39; #main h1＆＃39;在哪里设置＆＃39;颜色：$ sbbqyellow＆＃39;将胜过“.blur-text＆＃39;。如果你查看你的开发工具检查器，你可能会看到两种样式都被应用，但是错误的级联顺序。

为了让您的代码完全按预期工作，请更改＆＃39; .blur-text＆＃39;到＆＃39; #main h1.blur-text＆＃39;。但是，我建议尝试不使用ID或元素，而是尝试单个类来更好地控制特异性，尤其是对于像这样切换的事物。

css not＆＃39;删除＆＃39;在文本颜色设置为透明

2 个答案: