css没有'删除'文本颜色设置为透明

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 h1css规则具有比您的规则更高的特异性.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>