Могу ли я установить непрозрачность только для фонового изображения div?


87

Скажем, у меня есть

<div class="myDiv">Hi there</div>

Я хочу поставить background-imageи дать ему opacityиз 0.5- но я хочу , что текст , который я написал будет иметь полную непрозрачность ( 1).

Если бы я написал такой CSS

.myDiv { opacity:0.5 }

все будет с низкой непрозрачностью - а я этого не хочу.

Итак, мой вопрос: как получить фоновое изображение с низкой непрозрачностью и текстом с полной непрозрачностью?


stackoverflow.com/questions/6624457/ ... Обратите внимание, что у меня есть комментарий (под ответом Фила), показывающий способ сделать это с помощью прозрачности css, если это предпочтительный способ. ( jsfiddle.net/4tTNZ )
Joonas

Этот ответ гораздо более краткий, и я считаю, что он точно такой же.
JohnAllen

Ответы:


102

Нет, это невозможно, так как opacityвлияет на весь элемент, включая его содержимое, и нет возможности изменить это поведение. Вы можете обойти это двумя следующими способами.

Вторичный div

Добавьте divв контейнер еще один элемент, чтобы удерживать фон. Это наиболее удобный для разных браузеров метод, который будет работать даже в IE6.

HTML

<div class="myDiv">
    <div class="bg"></div>
    Hi there
</div>

CSS

.myDiv {
    position: relative;
    z-index: 1;
}

.myDiv .bg {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
    width: 100%;
    height: 100%;
}

См. Тестовый пример на jsFiddle

: before и :: before псевдоэлемент

Еще одна уловка - использовать псевдоэлементы CSS 2.1 :beforeили CSS 3 ::before. :beforeпсевдоэлемент поддерживается в IE начиная с версии 8, а ::beforeпсевдоэлемент не поддерживается вообще. Надеюсь, это будет исправлено в версии 10.

HTML

<div class="myDiv">
    Hi there
</div>

CSS

.myDiv {
    position: relative;
    z-index: 1;
}

.myDiv:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
}

Дополнительные примечания

Из-за поведения z-indexвам нужно будет установить z-index для контейнера, а также отрицательный z-indexдля фонового изображения.

Тестовые примеры

См. Тестовый пример на jsFiddle:


2
Я супер параноик, когда дело доходит до использования отрицательных значений с z-index ... но я не могу спорить с результатами. Howevveer, я хотел бы добавить width: 100%; height: 100%;к .bgтак , что IE6 может распространить Б.Г. внутри родительского DIV. jsfiddle.net/sbGb4/2
Joonas

Я думал, что для этого есть трюк css3, которого мне не хватает, но это тоже здорово!
Алон

@Lollero хороший момент! z-index- это боль, но это должно быть относительно безопасно, если вы дадите родителю положительный индекс.
mekwall

@Alon, если вы проверите тот комментарий, который я написал под вашим вопросом. У меня есть ссылка на другой вопрос, в котором есть несколько других вариантов, включая rgba, который является параметром css3. Вот неплохой трюк для пожилых людей, то есть .. css-tricks.com/2151-rgba-browser-support
Joonas

@Alon Я добавил еще один метод с использованием псевдоэлемента ::before. Это было то, что вы искали?
mekwall

155

Итак, вот другой способ:

background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");

3
@jj_: Потому что в то время поддержка linear-gradient. Принятый ответ, который я написал, старше 4 лет;)
mekwall

3
Возможно, вы могли бы добавить комментарий или небольшое обновление к своему вопросу, сообщив, что теперь это новый хороший способ сделать это. Увидимся через 4 года для нового обновления;)
jj_

@jj_: На самом деле это решение не делает изображение прозрачным. Он только добавляет поверх него белый слой с прозрачностью 50%. Следовательно, это неверный ответ на вопрос.
mekwall

7
Я думаю, мы можем согласиться с тем, что он достигает цели вопроса, так что да, это действительный ответ на вопрос.
Дэвид Кларк

да ... этот ответ в значительной степени самый простой из всех возможных ... иначе позиционирование с абсолютным становится беспорядком
Харкират Салуджа

4

css

div { 
    width: 200px;
    height: 200px;
    display: block;
    position: relative;
}

div::after {
    content: "";
    background: url(image.jpg); 
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

html

<div> put your div content</div>

0

Это можно сделать, используя другой класс div для текста Hi There ...

<div class="myDiv">
    <div class="bg">
   <p> Hi there</p>
</div>
</div>

Теперь вы можете применить стили к

тег. в противном случае для класса bg. Я уверен, что все работает нормально


0

Я реализовал решение Маркуса Эквалла, но смог удалить несколько вещей, чтобы упростить его, и оно все еще работает. Может быть, версия html / css 2017 года?

html:

<div id="content">
  <div id='bg'></div>
  <h2>What is Lorem Ipsum?</h2>
  <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
    book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
    desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

css:

#content {
  text-align: left;
  width: 75%;
  margin: auto;
  position: relative;
}

#bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('https://static.pexels.com/photos/6644/sea-water-ocean-waves.jpg') center center;
  opacity: .4;
  width: 100%;
  height: 100%;
}

https://jsfiddle.net/abalter/3te9fjL5/


1
Это делает то же самое, что и «Вторичный div» в моем ответе, с той лишь разницей, что вы пропустили z-index (возможно, сегодня это ведет себя по-другому и также может зависеть от браузера). Но доверять браузеру, чтобы он вел себя так, как ожидалось, обычно - плохая идея.
mekwall

0

Привет всем, я сделал это, и это сработало

	var canvas, ctx;

		function init() {
			canvas = document.getElementById('color');
			ctx = canvas.getContext('2d');

			ctx.save();
			ctx.fillStyle = '#bfbfbf'; //  #00843D   // 118846
			ctx.fillRect(0, 0, 490, 490);
			ctx.restore();
		}
section{
		height: 400px;
		background: url(https://images.pexels.com/photos/265087/pexels-photo-265087.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		position: relative;
	
}

canvas {
	width: 100%;
	height: 400px;
	opacity: 0.9;

}

#text {
	position: absolute;
	top: 10%;
	left: 0;
	width: 100%;
	text-align: center;
}


.middle{
	text-align: center;
	
}

section small{
	background-color: #262626;
	padding: 12px;
	color: whitesmoke;
  letter-spacing: 1.5px;

}

section i{
  color: white;
  background-color: grey;
}

section h1{
  opacity: 0.8;
}
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Metrics</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">  
</head>  
  
<body onload="init();">
<section>
<canvas id="color"></canvas>

<div class="w3-container middle" id="text">
<i class="material-icons w3-highway-blue" style="font-size:60px;">assessment</i>
<h1>Medimos las acciones de tus ventas y disenamos en la WEB tu Marca.</h1>
<small>Metrics &amp; WEB</small>
</div>
</section> 


0
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style=" background-color: #00000088"> Hi there </div>
<!-- #00 would be r, 00 would be g, 00 would be b, 88 would be a. -->
</body>
</html>

включение 4 наборов чисел сделает его rgba, а не cmyk, но в любом случае будет работать (rgba = 00000088, cmyk = 0%, 0%, 0%, 50%)


-1

Ни одно из решений не помогло мне. Если ничего не помогает, перенесите картинку в Photoshop и примените какой-нибудь эффект. 5 минут против столько времени на это ...

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.