изображение с наложением градиента, но текст должен быть впереди (без прозрачности)

Question

изображение с наложением градиента, но текст должен быть впереди (без прозрачности)

0

В проекте, который мне нужно реализовать, есть изображение (которое я помещаю как фоновое изображение div), поверх этого изображения есть наложение градиента с некоторой степенью непрозрачности, а кроме того, будет некоторый текст, который должен быть белым и спереди (непрозрачность 1).

Я не могу довести текст до фронта. Это можно сделать? Я также попытался поместить различные z-индексы, но независимо от того, какой z-индекс также выглядит непрозрачным.

<div class="background">
 <div class="blue-gradient opaque">
   <div class="page-title-div front">
     <h1>This text goes to front and is white</h1>
   </div>
 </div>
</div>

CSS:

.background {
  background-image: url('../img/back.png');
}
.blue-gradient {
  background-image: radial-gradient(circle farthest-corner at center, #15497E 0%, #3D93BC 100%);
}
.opaque {
  opacity: 0.7;
}
.front{
  opacity: 1;
}

faboolous 11 нояб. 2013, в 22:04

Источник

Теги:

html

css

css3

overlay

opacity

1 ответ

Ещё вопросы

David Hariri · Accepted Answer · 2013-11-11T19-46-00.000Z

Решение состоит в том, чтобы правильно вставить элементы и использовать теги местоположения.

<div class="background">
    <div class="blue-gradient"></div>    
    <h1>This text goes to front and is white</h1>
</div>

CSS

.background {
    position: absolute;
    height: 100%;
    width: 100%;
    display: block;
    background-image: url('http://jasonlefkowitz.net/wp-content/uploads/2013/07/Cute-Cats-cats-33440930-1280-800.jpg');
}
.blue-gradient {
    width:100%;
    height: 100%;
    position:absolute;
    opacity: 0.7;
    background-image: radial-gradient(circle farthest-corner at center, #15497E 0%, #3D93BC 100%);
}
h1 {
    position:relative;
    color:#fff;
}

Скрипт: http://jsfiddle.net/9tN35/

Интересно, все дело в позиции. Любая ссылка, чтобы я мог понять, почему?
Спасибо! Я пропустил position: relative часть в моем тексте заголовка.