Как изменить прозрачность объекта, накладываемого на фон?

Как наложить текст поверх фона с полупрозрачностью в CSS, чтобы текст не наследовал прозрачность фона?
  • 20 мая 2024 г. 14:41
Ответы на вопрос 2
1. Чтобы изменить прозрачность объекта, накладываемого на фон, можно использовать CSS свойство opacity. Например:

```
.background {
    background-color: rgba(255, 255, 255, 0.5); /* прозрачный фон */
    width: 100px;
    height: 100px;
}

.overlay {
    background-color: red; /* цвет объекта */
    opacity: 0.5; /* прозрачность объекта */
}
```

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

```
.background {
    background-color: rgba(255, 255, 255, 0.5); /* прозрачный фон */
}

.text {
    color: white; /* цвет текста */
    background-color: rgba(0, 0, 0, 0.5); /* прозрачный фон для текста */
    padding: 10px;
}
``` 

В данном примере текст будет белым цветом на полупрозрачном фоне черного цвета, не наследуя прозрачность фона.
Он наследует прозрачность, сделайте фон через псевдокалас 
.boarder{
    margin: 100px 0px 0px 0px;
    heigth: 700px;
position: realtive;
}
.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
   }
Похожие вопросы