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

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

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

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

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

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

CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 11 часов назад
- 34 просмотра
1

ответ
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 14 часов назад
- 28 просмотров
0

ответов
HTML

Простой
Как на html реализовать блоки «Внимание / Важно»?
- 1 подписчик
- 14 часов назад
- 90 просмотров
0

ответов
HTML

+1 ещё

Простой
Как разместить елементы с разных блоков чтобы они перекрывали друг друга?
- 1 подписчик
- 17 часов назад
- 46 просмотров
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- вчера
- 95 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 76 просмотров
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 19 нояб.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как построить код, чтобы гугл таблица на сайте выдавала только значение из конкретной ячейки?
- 1 подписчик
- 19 нояб.
- 40 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как выделить мышкой область на странице и присвоить класс элементам попавшим в эту область?
- 1 подписчик
- 19 нояб.
- 101 просмотр
1

ответ
JavaScript

+3 ещё

Средний
Как сделать слайдер на swiper, в котором активный слайд всегда крайний слева?
- 1 подписчик
- 19 нояб.
- 112 просмотров
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Сверстать десктоп версию сайта в tailwind

22 нояб. 2024, в 06:06

1500 руб./в час

Создать TG бота

22 нояб. 2024, в 06:04

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

Тестирование модуля ElasticSearch через ftp

22 нояб. 2024, в 03:54

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

дайте нормальный 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 мая

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

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

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

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

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