Объект накладываемый на фон становится полупрозрачный, как исправить?

Question

hzk616 @hzk616

HTML
CSS

Объект накладываемый на фон становится полупрозрачный, как исправить?

у меня фон в css установлен полупрозрачный (opacity: 0.5;) и мне надо поверх этого фона наложить текст, когда я это делаю, он тоже становится полупрозрачный, а мне не нужна полупрозрачность на тексте

<div class="info">
        <h1>О КОМПАНИИ</h1>
        <p> апвпваыпывап</p>
    </div>
   <div class="boarder">

.boarder{
    margin: 100px 0px 0px 0px;
    height: 700px;
    border: 3px solid white;
    background-image: url(../img/fon1.jpg);
    background-position: center;
    opacity: 0.5;

.info{
      color:white;
       }
   }

Вопрос задан 20 мая
83 просмотра

8 комментариев

Подписаться Простой 8 комментариев

GeKskill @GeKskill

дайте нормальный html который используете, то что тут выложили вообще накладываться друг на друга не может (если только в css не absolute на одном из них). Это разные блоки, причем второй вы не закрыли.

Написано 20 мая
hzk616 @hzk616 Автор вопроса
О НАС

КАТАЛОГ

КОНТАКТЫ

О КОМПАНИИ
C 2016 года специализируется на производстве фасадного декора и термо-панелей из пенополистирола с покрытием из полимерного связующего и природных минералов. Наша система утепления наружных стен под названием "Теплый Камень" сочетает в себе декоративные панели, имитирующие камень и кирпич, а также фасадный декор, что придает уникальный вид каждому зданию.
Написано 20 мая
GeKskill @GeKskill

hzk616, снова ерунду какую-то кидаете. Где ваша разметка с классами info и boarder?

Написано 20 мая
hzk616 @hzk616 Автор вопроса
GeKskill,
<body> <header> <img src="img/logo-1.jpg" alt="Изображение" width="200px"> </header> <nav> <ul> <li><a href="#"> О НАС </a></li> <li><a href="#"> КАТАЛОГ </a></li> <li><a href="#"> КОНТАКТЫ </a></li> </ul> </nav> <div class="info"> <h1>О КОМПАНИИ</h1> <p> апвпваыпывап</p> </div> <div class="boarder"> </div> </body> </html>

body{
background-color: rgb(26,26,26);
}

header{
text-align: left;
height: 300px;
}

ul{
list-style-type: none;
text-align: center;
margin: -220px 0px 0px 170px;
padding: 0px;
}

li{
display: inline;
margin-right: 100px;
}

a{
color: rgb(249,249,249);
text-decoration: none;
font-size: 30px;

}

a:hover{
color: rgb(151, 3, 94);
}

.boarder{
margin: 100px 0px 0px 0px;
height: 700px;
position: relative;
}
.boarder:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../img/fon1.jpg);
background-position: center;
opacity: 0.5;
}
.info{
color:white;
position: relative
}

h1{
color: white;
text-align: center;

}
p{
color: white;
text-align: center;
font-size: 35px;
}

.info{
margin-bottom: -300px;
color:white;

}
Написано 20 мая
GeKskill @GeKskill

hzk616, другое дело. Но тут все работает, в чем проблема? Текст не прозрачный https://jsfiddle.net/x3az9hvt/1/

Написано 20 мая
hzk616 @hzk616 Автор вопроса

GeKskill, нет же, видите что происходит с белым цветом, когда он попадает на полу-прозрачный фон

Написано 20 мая
GeKskill @GeKskill

hzk616, https://jsfiddle.net/x3az9hvt/2/

Написано 20 мая
hzk616 @hzk616 Автор вопроса

GeKskill, извините, мы можем связаться по дискорду например? мне до завтра нужно сайт доделать, я плачу

Написано 20 мая

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Простой
Как сделать перемещение контента когда долистали до блока?
- 1 подписчик
- вчера
- 92 просмотра
0

ответов
HTML

+1 ещё

Простой
Как сверстать блок с видео?
- 1 подписчик
- вчера
- 96 просмотров
1

ответ
CSS

Простой
Как сделать так, чтобы имя было под id?
- 1 подписчик
- 24 июл.
- 115 просмотров
1

ответ
CSS

Простой
Как расположить элементы как на картинке?
- 1 подписчик
- 24 июл.
- 112 просмотров
0

ответов
HTML

+2 ещё

Простой
Как код HTML превратить в сокращенный вариант?
- 1 подписчик
- 24 июл.
- 175 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как отключить лупу айфона в react telegram mini apps?
- 1 подписчик
- 23 июл.
- 46 просмотров
1

ответ
CSS

Простой
Как сделать динамический отступ в margin через «clamp»?
- 1 подписчик
- 23 июл.
- 71 просмотр
1

ответ
CSS

+1 ещё

Простой
Как найти нужное значение в gap?
- 1 подписчик
- 23 июл.
- 63 просмотра
2

ответа
HTML

Простой
Можно ли писать div вне body?
- 1 подписчик
- 22 июл.
- 197 просмотров
2

ответа
HTML

+2 ещё

Средний
Как не обрезать тень элемента, используя «overflow: hidden»?
- 1 подписчик
- 22 июл.
- 105 просмотров
3

ответа
Показать ещё Загружается…

Верстальщик HTML

MST

от 500 $

HTML-верстальщик

SilverDuck

от 20 000 до 40 000 ₽

Frontend-разработчик (React)

ДАЛЕЕ

от 140 000 ₽

Верстка дизайна

26 июл. 2024, в 23:29

15000 руб./за проект

Заставить работать приложение на react+php (найти активацию)

26 июл. 2024, в 22:36

5000 руб./за проект

Сделать логотип в векторе

26 июл. 2024, в 22:02

2000 руб./за проект

дайте нормальный html который используете, то что тут выложили вообще накладываться друг на друга не может (если только в css не absolute на одном из них). Это разные блоки, причем второй вы не закрыли.
О НАС

КАТАЛОГ

КОНТАКТЫ

О КОМПАНИИ
C 2016 года специализируется на производстве фасадного декора и термо-панелей из пенополистирола с покрытием из полимерного связующего и природных минералов. Наша система утепления наружных стен под названием "Теплый Камень" сочетает в себе декоративные панели, имитирующие камень и кирпич, а также фасадный декор, что придает уникальный вид каждому зданию.
hzk616, снова ерунду какую-то кидаете. Где ваша разметка с классами info и boarder?
GeKskill,
<body> <header> <img src="img/logo-1.jpg" alt="Изображение" width="200px"> </header> <nav> <ul> <li><a href="#"> О НАС </a></li> <li><a href="#"> КАТАЛОГ </a></li> <li><a href="#"> КОНТАКТЫ </a></li> </ul> </nav> <div class="info"> <h1>О КОМПАНИИ</h1> <p> апвпваыпывап</p> </div> <div class="boarder"> </div> </body> </html>

body{
background-color: rgb(26,26,26);
}

header{
text-align: left;
height: 300px;
}

ul{
list-style-type: none;
text-align: center;
margin: -220px 0px 0px 170px;
padding: 0px;
}

li{
display: inline;
margin-right: 100px;
}

a{
color: rgb(249,249,249);
text-decoration: none;
font-size: 30px;

}

a:hover{
color: rgb(151, 3, 94);
}

.boarder{
margin: 100px 0px 0px 0px;
height: 700px;
position: relative;
}
.boarder:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../img/fon1.jpg);
background-position: center;
opacity: 0.5;
}
.info{
color:white;
position: relative
}

h1{
color: white;
text-align: center;

}
p{
color: white;
text-align: center;
font-size: 35px;
}

.info{
margin-bottom: -300px;
color:white;

}
hzk616, другое дело. Но тут все работает, в чем проблема? Текст не прозрачный https://jsfiddle.net/x3az9hvt/1/
GeKskill, нет же, видите что происходит с белым цветом, когда он попадает на полу-прозрачный фон
GeKskill, извините, мы можем связаться по дискорду например? мне до завтра нужно сайт доделать, я плачу

Answer 1 · 2024-05-20 18:12:15

hudiakov @hudiakov

Отредактируйте как вам нужно

Ответ написан 20 мая

Комментировать

Объект накладываемый на фон становится полупрозрачный, как исправить?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт