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

Допустим, у меня есть

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

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

если бы я написал CSS вот так

.myDiv { opacity:0.5 }

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

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

8 55
html css css3 background background-image

8 ответов:

нет, это не может быть сделано, так как 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 и ::перед псевдо-элемент

еще один трюк заключается в использовании 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-индекс для контейнера, а также отрицательный z-index для фонового изображения.

тесты

см. тестовый случай на jsFiddle:

75

вот так:

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

css

div {
ширина: 200px;
высота: 200px;
дисплей: блок;
позиция: относительная;
}

div:: после {
содержимое: "";
фон: url (изображение.jpg);
непрозрачность: 0.5;
top: 0;
слева: 0;
внизу: 0;
справа: 0;
позицию: абсолютная;
Z-индекса: -1;
}

html


положите ваш div содержание

1

Это можно сделать с помощью другого класса div для текста Привет там...

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

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

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

0

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

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/

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%)

0

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

-1