10 / 18 / 4
Регистрация: 10.11.2017
Сообщений: 283
1

Наложение

28.12.2017, 21:43. Показов 600. Ответов 6
Метки css, html (Все метки)

Почему ровно не становятся элементы на картинку???
Картинки в архиве. Результат работы сайта на скрине

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Interior home page</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>
    <div class="products">
        <div class="pr">
            <div class="prodbg"><img src="img/product-1.jpg" alt="">
                <a href="#">
                    <div class="go"><img src="img/arrow.png" alt=""></div>
                </a>
            </div>
        </div>
        <div class="pr"><img src="img/product-2.jpg" alt="">
            <div class="prodbg">
                <a href="#">
                    <div class="go"><img src="img/arrow.png" alt=""></div>
                </a>
            </div>
        </div>
        <div class="pr"><img src="img/product-3.jpg" alt="">
            <div class="prodbg">
                <a href="#">
                    <div class="go"><img src="img/arrow.png" alt=""></div>
                </a>
            </div>
        </div>
        <div class="pr"><img src="img/product-4.jpg" alt="">
            <div class="prodbg">
                <a href="#">
                    <div class="go"><img src="img/arrow.png" alt=""></div>
                </a>
            </div>
        </div>
    </div>
</body>
</html>
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
html {
    background-color: #000;
}
 
.products img {
    display: inline-block;
    float: left;
    padding-left: 30px;
}
 
.pr {
    display: inline-block;
    position: relative;
}
 
.prodbg {
    background-color: #fff;
    opacity: 0.7;
    width: 268px;
    height: 268px;
}
 
.go {
    position: absolute;
    display: inline-block;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0px 2px 4.85px 0.15px rgba(33, 33, 33, 0.35);
    width: 48px;
    height: 48px;
}
 
.go img {
    margin-top: 14px;
    padding-right: 18px;
    padding-left: 18px;
    width: 12px;
    height: 20px;
}
 
.go {
    top: 62px;
    left: 135px;
}
Миниатюры
Наложение  
Вложения
Тип файла: zip img.zip (22.7 Кб, 4 просмотров)
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
28.12.2017, 21:43
Ответы с готовыми решениями:

Наложение
Привет всем. Есть два прямоугольника.Один поярче , другой потемнее.Как засунуть тот что потемнее ,...

наложение
Есть аватарка, есть статус онлайн, забыл как сделать чтобы статус ореинтировался от углов аватарки...

Наложение слоёв
Имеется два похожих блока с содержимым, т.е. с примерной структурой блоков и стилей. В них есть...

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

6
275 / 269 / 106
Регистрация: 12.01.2016
Сообщений: 1,581
28.12.2017, 22:54 2
Богдан Хакер, ищи ошибку в HTML коде. У тебя разметка не правильная.
0
10 / 18 / 4
Регистрация: 10.11.2017
Сообщений: 283
29.12.2017, 13:35  [ТС] 3
Сделал так. НО результат!

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Interior home page</title>
    <link rel="stylesheet" href="style2.css">
</head>
 
<body>
    <div class="pr">
        <img src="img/product-1.jpg" alt="">
        <div class="prodbg">
            <a href="#">
                <div class="go"><img src="img/arrow.png" alt=""></div>
            </a>
        </div>
    </div>
    <div class="pr">
        <img src="img/product-2.jpg" alt="">
        <div class="prodbg">
            <a href="#">
                <div class="go"><img src="img/arrow.png" alt=""></div>
            </a>
        </div>
    </div>
    <div class="pr">
        <img src="img/product-3.jpg" alt="">
        <div class="prodbg">
            <a href="#">
                <div class="go"><img src="img/arrow.png" alt=""></div>
            </a>
        </div>
    </div>
    <div class="pr">
        <img src="img/product-4.jpg" alt="">
        <div class="prodbg">
            <a href="#">
                <div class="go"><img src="img/arrow.png" alt=""></div>
            </a>
        </div>
    </div>
</body>
</html>
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
html {
    background-color: #000;
}
 
.products img {
    display: inline-block;
    float: left;
    padding-left: 30px;
}
 
.pr {
    display: inline-block;
    position: relative;
}
 
.prodbg {
    background-color: #fff;
    opacity: 0.7;
    width: 268px;
    height: 268px;
}
 
.go {
    position: absolute;
    display: inline-block;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0px 2px 4.85px 0.15px rgba(33, 33, 33, 0.35);
    width: 48px;
    height: 48px;
}
 
.go img {
    margin-top: 14px;
    padding-right: 18px;
    padding-left: 18px;
    width: 12px;
    height: 20px;
}
 
.go {
    top: 62px;
    left: 135px;
}
Миниатюры
Наложение  
0
10 / 18 / 4
Регистрация: 10.11.2017
Сообщений: 283
29.12.2017, 13:51  [ТС] 4
Проблему решил сам! Надо было чуть-чуть поЯндексить.
Просто задал картинкам position: absolute, а полупрозрачному фону relative.
0
275 / 269 / 106
Регистрация: 12.01.2016
Сообщений: 1,581
29.12.2017, 14:40 5
Цитата Сообщение от Богдан Хакер Посмотреть сообщение
position: absolute
Дальше будешь натыкаться на другие грабли с этим свойством.
0
10 / 18 / 4
Регистрация: 10.11.2017
Сообщений: 283
29.12.2017, 14:44  [ТС] 6
А что? у меня всё на сайте встало как надо.
0
767 / 323 / 157
Регистрация: 26.05.2016
Сообщений: 2,127
29.12.2017, 14:48 7
Цитата Сообщение от Богдан Хакер Посмотреть сообщение
А что? у меня всё на сайте встало как надо.
например разные разрешения экранов))
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
29.12.2017, 14:48

Наложение текстуры
Здравствуйте. Давно уже мучает один вопрос... Можно ли наложить текстуру с прозрачностью поверх...

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

Наложение изображений
Как лучше всего зделать етот елемент? У меня есть елементы которые отмечены на фото, как лучше...

Polygon - наложение
Всем привет. Есть что-то схоже как на скриншоте (код не дам, так как брал очень много примеров и...


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

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

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