Выполнение фонового изображения полупрозрачное

-1

У меня есть фоновое изображение для всей страницы, а другое для содержимого div. Я хочу, чтобы фоновое изображение содержимого div должно быть полупрозрачным, чтобы часть фонового изображения (для всей страницы) под ним также была видимой.
Я также попытался уменьшить непрозрачность моего .png фонового файла, используя редактор изображений, но он не отобразил мой фон ниже, вместо этого изображение просто осветлило.Выполнение фонового изображения полупрозрачное

источник

2016-02-12 Satwik

У вас также есть 'фон-color' набор? Если да, удалите его. – alesc

Используйте псевдо-элемент

body { 
 
    background-image: url(http://lorempixel.com/image_output/nature-q-c-1600-1600-10.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
div { 
 
    width: 600px; 
 
    height: 500px; 
 
    position: relative; 
 
} 
 
div::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url(http://lorempixel.com/image_output/city-q-c-600-500-7.jpg); 
 
    opacity: 0.5; 
 
    z-index: -1; 
 
}

<div> 
 
    <h1>Heading Text</h1> 
 
</div>

источник

2016-02-12 12:06:41

, но это изменяет непрозрачность внутреннего текста, который я не хочу – Satwik

Нет, это не так. Просто псевдоэлемент сидит поверх текста. Исправлено это с помощью z-индекса. –

Чтобы сделать DIV прозрачна вы можете использовать:

.thediv{ 
    background-color: transparent 
}

Edit: Полупрозрачный с:

.thediv{ 
    background:rgba(255,255,255,0.4); 
}

источник

2016-02-12 11:29:34

Элементы прозрачны по умолчанию ... – alesc

HTML

<body> 
    <div></div> 
</body>

CSS

body { 
    background-image: url(https://static.pexels.com/photos/24419/pexels-photo-24419-large.jpg); 
    background-repeat: no-repeat; 
} 

div { 
    width: 600px; 
    height: 500px; 
    background-image: url(https://static.pexels.com/photos/940/sky-sunset-sand-night-large.jpg); 
    opacity: 0.5; 
}

JSfiddle: https://jsfiddle.net/0jw6c79L/

источник

2016-02-12 11:35:15

, но это изменяет непрозрачность внутреннего текста, который мне не нужен – Satwik

Выполнение фонового изображения полупрозрачное

ответ

Смежные вопросы