в CSS не снимая на цвет текста установить прозрачный

Question

в CSS не снимая на цвет текста установить прозрачный

Я пытаюсь после загрузки 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>

442 2

jQuery javascript css3

2 ответов:

Comments

Ничего не найдено.

Patrick Evans · Accepted Answer · 2017-10-18 19:37:55

Ваше правило #main h1 css имеетболее высокую специфичность , чем ваше правило .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>

Greg · Accepted Answer · 2017-10-18 19:40:50

Ваши CSS-селекторы различаются по своей специфичности. '#main h1 'где вы устанавливаете' color:$sbbqyellow 'will trump'.размытие текста". Если вы посмотрите в инспекторе инструментов разработки, вы, вероятно, увидите оба стиля, но в неправильном каскадном порядке.

Для того, чтобы ваш код работал точно так, как задумано изменение'.размытие-текст ' to ' #main h1.размытие текста". Однако я бы рекомендовал попробовать не идентификаторы или элементы, а скорее отдельные классы, чтобы лучше контролировать специфику, особенно на вещах, которые переключаются, как этот.