Оттенки серого Изменение цвета текста? CSS

Моя цель состоит в том, чтобы иметь фоновое изображение охватывает весь экран, как это: http://playjudgey.com/Оттенки серого Изменение цвета текста? CSS

Я пытаюсь изменить фоновое изображение, чтобы быть в оттенках серого, но каждый раз, когда я делаю, это меняет весь текст, который написан над изображением. Я предполагаю, что фильтр применяется ко всему, что находится внутри моего div. Мой код ниже:

<html> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="css/normalize.css"> 
    <link rel="stylesheet" href="css/main.css"> 
    <meta name="viewport" content="width=device-width"> 
</head> 

<body> 
    <div class="wrapper"> 
      <div class="hometext"> 
       You are the best! 
      </div> 
    </div> 
</body>

Так это то, что я сделал для моего CSS:

.hometext { 
    width: 600px; 
    margin: 0 auto; 
    color: red; 
    text-align: center; 

} 

.wrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    background: url('../img/money.jpg'); 
    -webkit-filter: grayscale(1); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 
    overflow: hidden; 
}

Вопрос заключается в том, что текст я пишу не красный, но серый. Есть ли способ кодировать это по-другому, поэтому мой текст будет окрашен? Или я должен просто повернуть изображение в оттенках серого через внешнюю программу?

источник

2015-09-21 TwoPointOH

Я решил схожие проблемы с непрозрачностью, заставляя текст исчезать. Вы можете поместить hometext div вне оболочки и сделать их абсолютными. См. Мой ответ и скрипку ниже. – deebs

Если вам не нужно менять цвет фона динамически, я бы просто изменил его на оттенки серого в основном графическом редакторе. CSS filter не полностью совместим с кросс-браузером. Я верю в любом случае, так что вы будете безопаснее (и проще).

Если бы вы все-таки сохранили то, как сейчас, вам просто нужно изменить свойство filter на ваш текст как наследующее его от вашего родителя div.

источник

2015-09-21 19:57:00 la1ch3

-2

Ваш <div class="wrapper"> div также обертывает ваш hometext div. Вы должны попробовать это:

.hometext { 
    width: 600px; 
    margin: 0 auto; 
    color: red !important; 
    text-align: center; 

}

источник

2015-09-21 19:58:09 ProgrammerV5

Я не думаю, что '! Important' следует использовать в этом случае, и я не думаю, что это даже решило бы проблему. Его проблема наследования с 'filter' наследуется от оболочки к дочернему тексту. – la1ch3

Я просто попробовал, и вы абсолютно правы. – ProgrammerV5

Вы можете получить тот же самый эффект с режимом смешивания, которая применяется только к фону, и, кроме того, она имеет больше поддержки (FF)

.hometext { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
    color: red; 
 
    text-align: center; 
 
    font-size: 60px; 
 

 
} 
 

 
.wrapper { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-image: url('http://placekitten.com/1000/750'); 
 
    background-color: gray; 
 
    background-blend-mode: luminosity; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: cover; 
 
    overflow: hidden; 
 
}

<div class="wrapper"> 
 
      <div class="hometext"> 
 
       You are the best! 
 
      </div> 
 
    </div>

источник

2015-09-21 20:01:29 vals

Что делать, если вы кладете hometext DIV вне оболочки, делая их как абсолютную:

<body> 
<div class="wrapper"></div> 
<div class="hometext"> 
      You are the best! 
</div>

.hometext { 
    margin: 0 auto; 
    color: red; 
    text-align: center; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: 1000; 
}

Дополнительные CSS будут необходимы для укладки и положения, но здесь скрипку: http://jsfiddle.net/Lepe84tu/

источник

2015-09-21 20:02:16 deebs

Вместо того, чтобы фоновое изображение на .wrapper, вы могли бы сделать еще один div как родственный .hometext, что имеет изображение в качестве фона - таким образом вы можете самостоятельно стилизовать изображение и текст.

источник

2015-09-21 20:02:30 chazsolo

Оттенки серого Изменение цвета текста? CSS

ответ

Смежные вопросы