Не срабатывает background-color

@dalay_lama · Регистрация: 22.09.2012

Студворк — интернет-сервис помощи студентам

Всем доброго времени суток. В общем, пытаюсь сделать на странице сетку изображений, адаптивную. Использую bootstrap. Структура div-ов выглядит так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    <section class="maincontent">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="grid">
                        <div class="col-xs-12 col-md-4">
                            <div class="grid-item"><img src="photos/ng1.jpg" alt=""></div>
                        </div>
                        <div class="col-xs-12 col-md-4">
                            <div class="grid-item"><img src="photos/ng1.jpg" alt=""></div>
                        </div>
                        <div class="col-xs-12 col-md-4">
                            <div class="grid-item"><img src="photos/ng1.jpg" alt=""></div>
                        </div>
                        <!-- и т.д. -->
                    </div>
                </div>
            </div>
        </div>
    </section>

В стилях, хочу реализовать изначальное затемнение изображений, а при наведении, чтобы изображение светлело. Но при попытке задать background-color для .grid-item ничего не происходит, и я никак не могу понять почему. CSS стили выглядят так:

CSS
1
2
3
4
5
6
7
8
.grid {
    height: 100%;
    width: 100%;
}
 
.grid .grid-item {
    background-color: black;
}

@andrey1994 · 12.07.2015, 20:35

Одно из решений(не моё).

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
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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
.container {
    margin: 0 auto;
    width: 660px;
}
 
.pic {
    float: left;
    height: 200px;
    margin: 10px;
    position: relative;
    width: 200px;
}
.pic:after {
    content: ' ';
    background-color: #000;
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    transition: opacity 0.3s;
    width: 100%;
}
.pic:hover:after {
    opacity: 0;
}
</style>
</head>
<body>
  <div class="container">
    <div class="pic">
      <img src="http://placekitten.com/200/200">
    </div>
    <div class="pic">
      <img src="http://placekitten.com/200/200">
    </div>
    <div class="pic">
      <img src="http://placekitten.com/200/200">
    </div>
    <div class="pic">
      <img src="http://placekitten.com/200/200">
    </div>
    <div class="pic">
      <img src="http://placekitten.com/200/200">
    </div>
    <div class="pic">
      <img src="http://placekitten.com/200/200">
    </div>
    <div class="pic">
      <img src="http://placekitten.com/200/200">
    </div>
    <div class="pic">
      <img src="http://placekitten.com/200/200">
    </div>
    <div class="pic">
      <img src="http://placekitten.com/200/200">
    </div>
  </div>
</body>
</html>

Демо.

@Fourd · 12.07.2015, 20:43

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.grid {
    height: 100%;
    width: 100%;
} 
.grid .grid-item {
    background-color: black;
}
.grid-item img {
    opacity: 0.5;
}
.grid-item img:hover { 
    opacity: 1;
}

@dalay_lama · 12.07.2015, 21:35 **[ТС]**

Fourd, вы не поняли, я знаю как сделать осветление изображения при наведении, проблема в том, что не срабатывает свойство:

CSS
1
2
3
.grid .grid-item {
    background-color: black;
}

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

@Sn1p3rOk · 12.07.2015, 21:43

Сообщение от dalay_lama

Но при попытке задать background-color для .grid-item ничего не происходит

А картинка разве не перекрывает твой фон ?

@dalay_lama · 13.07.2015, 03:28 **[ТС]**

Сообщение от Sn1p3rOk

А картинка разве не перекрывает твой фон ?

да, похоже вы правы. Попробовал убрать изображение из grid-item, блок закрашивается, но только если я ему задаю фиксированный размер.

А как быть в этой ситуации?

@Sn1p3rOk · 13.07.2015, 04:13

Попробуй relative.

@dalay_lama · 13.07.2015, 04:21 **[ТС]**

Sn1p3rOk, попробовал - никакой реакции

@Sn1p3rOk · 13.07.2015, 04:35

Покажите измененный кусок кода и css-стили.

@dalay_lama · 13.07.2015, 04:44 **[ТС]**

Sn1p3rOk,
html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    <section class="maincontent">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="grid">
                        <div class="col-xs-12 col-sm-4 col-md-3">
                            <div class="grid-item"><a href="#"><img src="photos/ng1.jpg" alt=""></a></div>
                        </div>
                        <div class="col-xs-12 col-sm-4 col-md-3">
                            <div class="grid-item"><a href="#"><img src="photos/ng1.jpg" alt=""></a></div>
                        </div>
                        <div class="col-xs-12 col-sm-4 col-md-3">
                            <div class="grid-item"><a href="#"><img src="photos/ng1.jpg" alt=""></a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.grid {
    height: 100%;
    width: 100%;
}
 
.grid .grid-item {
    margin-bottom: 15px;
    background-color: black;
    position: relative;
}
 
.grid-item a {
    display: block;
    height: 100%;
    width: 100%;
    background-color: black;
}
 
.grid .grid-item img {
 
}

@Sn1p3rOk · 13.07.2015, 05:26

dalay_lama, так теперь уточни, что ты хочешь сделать?

Добавлено через 57 секунд
Нужно чтобы картинка была затемненная, а при наведения затемнение пропадала?

Добавлено через 26 секунд
То есть ты хочешь сделать затемнение фоном ?

@dalay_lama · 13.07.2015, 05:37 **[ТС]**

Сообщение от Sn1p3rOk

То есть ты хочешь сделать затемнение фоном ?

Да, именно. Т.е. чтобы кодом это выглядело так:

CSS
1
2
3
4
5
6
7
8
.grid-item {
   background-color: black;
   opacity: 0.6;
}
 
.grid-item:hover {
   opacity: 0;
}

ну примерно логика у меня такая была. Вот только background не срабатывает, и мне это в диковинку если честно. Я в вёрстке мало чего понимаю, но мне помнится, я уже что-то похожее делал, и делал именно так, если конечно память не изменять. Т.е. брал блок div, пихал в него img, сам блок затемнял background-ом и всё было ОК, ну по крайней мере, мне так помнится)
Я что-то упустил? или вообще в корне не правильно задачу решаю?

@Sn1p3rOk · 13.07.2015, 05:49

Сообщение от dalay_lama

Вот только background не срабатывает

Он и не сработает. Потому что фон не может перекрыть картинку которая лежит в нем.

Добавлено через 1 минуту
Без псевдоэлементов тут не обойтись.

@dalay_lama · 13.07.2015, 05:51 **[ТС]**

Сообщение от Sn1p3rOk

Без псевдоэлементов тут не обойтись

это вы имеете ввиду after/before? а можно чуть подробней?

@Sn1p3rOk · 13.07.2015, 05:52

Вот набросал короткий пример.

HTML5
1
2
3
<div class="darkness">
    <img src="http://i.ebayimg.com/00/s/Mjc2WDQ2MA==/$T2eC16JHJF0FF,Esfq1mBSLh2sOw2!~~48_79.JPG" />
<div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.darkness::before {
    content: '';
    position: absolute;
    background: rgba(0,0,0,0.8);
    width: 330px;
    height: 240px;
    transition: 1.5s;
}
 
.darkness:hover::before {
    content: '';
    background: rgba(0,0,0,0);
}

Работоспособность смотри по этой ссылке https://jsfiddle.net/dz3dv373/34/

@dalay_lama · 13.07.2015, 06:13 **[ТС]**

Sn1p3rOk, большое спасибо, это именно то что нужно.

Новые блоги и статьи Все статьи Все блоги /
влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .

@Sn1p3rOk 288 / 175 / 86 Регистрация: 19.04.2014 Сообщений: 1,095
	13.07.2015, 04:13
	Попробуй relative. 1

@dalay_lama 82 / 82 / 50 Регистрация: 22.09.2012 Сообщений: 495
	13.07.2015, 04:21 [ТС]
	Sn1p3rOk, попробовал - никакой реакции 0

@Sn1p3rOk 288 / 175 / 86 Регистрация: 19.04.2014 Сообщений: 1,095
	13.07.2015, 04:35
	Покажите измененный кусок кода и css-стили. 1

@Sn1p3rOk 288 / 175 / 86 Регистрация: 19.04.2014 Сообщений: 1,095
	13.07.2015, 05:26
	dalay_lama, так теперь уточни, что ты хочешь сделать? Добавлено через 57 секунд Нужно чтобы картинка была затемненная, а при наведения затемнение пропадала? Добавлено через 26 секунд То есть ты хочешь сделать затемнение фоном ? 1

@dalay_lama 82 / 82 / 50 Регистрация: 22.09.2012 Сообщений: 495
	13.07.2015, 06:13 [ТС]
	Sn1p3rOk, большое спасибо, это именно то что нужно. 0

Не срабатывает background-color

Решение