javascript - css 不是 'removing' 文本颜色设置为透明

Question

我试图在 DOM 加载后将 h1 内的文本更改为透明，模糊效果有效，但颜色效果无效。

这是我的代码部分:

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

#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)

<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 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>