27 / 41 / 13
Регистрация: 15.05.2013
Сообщений: 1,313
1

Наложение слоёв

28.06.2016, 15:35. Показов 846. Ответов 3
Метки нет (Все метки)

Имеется два похожих блока с содержимым, т.е. с примерной структурой блоков и стилей.
В них есть наложение слоёв, фон задаётся задним слоем (класс .bg).
Но в верхнем блоке видно фон, а в нижнем блоке не видно фон.
Почему так происходит?
https://jsfiddle.net/ut8q34pb/1/
Если увеличить z-index у фона, то фон видно, но текст перестаёт выделяться.
Это меня также интересует. Нужно чтобы текст также выделялся
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<header class="header">
    <div class="wrap">
        <nav class="menu">
            <ul class="menu__list">
                <li><a href="#">Главная</a></li>
                <li><a href="#">О компании</a></li>
                <li><a href="#">Новости</a></li>
                <li><a href="#">Статьи</a></li>
                <li><a href="#">Контакты</a></li>
                <li class="nav-line"></li>
            </ul>
        </nav>
    </div>
    <div class="bg"></div>
</header>
 
<div class="contacts">
    <div class="wrap">
        <div class="contacts__block">
            <h2>контакты</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquam culpa dolorum eveniet fuga fugiat ipsam iste laboriosam modi natus nisi nostrum, repellendus rerum sed sit ut veritatis vero voluptas?</p>
        </div>
        <div class="bg"></div>
    </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
.wrap {
  max-width: 1225px;
  width: 100%;
  margin: 0 auto;
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url([url]http://tochka-na-karte.ru/templates/traveling/images/logo.png[/url]) repeat;
  -webkit-opacity: .15;
  opacity: .15;
  z-index: -1;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #01983b;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5), inset 0 -3px 0 rgba(255, 255, 255, 0.2);
  z-index: 10;
}
.header .nav-line {
  display: inline-block;
  width: 100%;
  height: 0;
  visibility: hidden;
}
.header .menu {
  z-index: 1;
}
.header .menu ul {
  padding: 22px 0;
  text-align: justify;
  font-size: 1px;
  line-height: 0;
}
.header li {
  display: inline-block;
  text-align: left;
}
.header a {
  position: relative;
  display: block;
  font-size: 16px;
  text-transform: uppercase;
  line-height: 30px;
  text-decoration: none;
  color: white;
  -webkit-transition: color 0.4s;
  transition: color 0.4s;
}
 .contacts {
    position: relative;
    text-align: center;
    margin-top: 100px;
}
 .contacts .wrap {
    position: relative;
    z-index: 10;
}
 .contacts__block {
    padding: 34px 0;
    background-color: #01983b;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5), inset 0 3px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1;
}
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
28.06.2016, 15:35
Ответы с готовыми решениями:

Наложение слоев
Добрый день уважаемые. Не совсем стандартный вопрос по CSS3. Есть div с текстурой, есть...

Наложение слоев
Привет всем, подскажите как можно сделать вот, что бы наложение было, при этом не использовать...

Наложение слоев (div)
Существует два отдельных слоя. Условно 1 и 2 ниже первого. Надо чтобы 1 слой немного перекрывал...

Приоритет наложение слоёв
Свойство z-index как правило применяется только исключительно к позиционированным элементам...

3
Модератор
Эксперт JSЭксперт HTML/CSS
3814 / 2666 / 1519
Регистрация: 12.07.2015
Сообщений: 6,662
Записей в блоге: 4
28.06.2016, 16:24 2
Уберите зеленый фон у .contacts__block и задайте его .contacts .wrap:

CSS
1
2
3
.contacts .wrap {
  background-color: #01983b;
}
А не проще ли сделать заранее полу-прозрачный рисунок и тогда можно будет упростить код?
1
27 / 41 / 13
Регистрация: 15.05.2013
Сообщений: 1,313
28.06.2016, 20:49  [ТС] 3
Цитата Сообщение от mrtoxas Посмотреть сообщение
А не проще ли сделать заранее полу-прозрачный рисунок и тогда можно будет упростить код?
т.е. убрать opacity ?
0
Модератор
Эксперт JSЭксперт HTML/CSS
3814 / 2666 / 1519
Регистрация: 12.07.2015
Сообщений: 6,662
Записей в блоге: 4
28.06.2016, 20:58 4
Да, потом удалить блоки .bg, добавить к нужным блокам новый класс и этому классу задать в стилях фоновый рисунок и заливку.
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
28.06.2016, 20:58

Наложение слоев z-index
Добрый день, подскажите пожалуйста в адаптивной версии идет наложение слоев всплывающего окна и оно...

CSS наложение слоев
#main { width: 800px; margin: 0 auto; min-height: 80%; height: 80%; background-color: #222;...

Наложение слоев в одном диве
Привет! Совсем заблудился в иерархии тегов. Нужно сделать резиновый div (100%/100%) с видео...

Наложение слоев по верх основного
Здравствуйте. Возникла тут небольшая проблема, пытался сделать небольшой &quot;Скриптик&quot;, но и тут мои...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.