Скажімо, маю

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

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

Якби я писав CSS так

.myDiv { opacity:0.5 }

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

Тож моє запитання - як я можу отримати фонове зображення з низькою непрозорістю із текстом із повною непрозорістю?

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

Вторинний див

Додайте ще один 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-індекс для контейнера, а також мінус z-indexдля фонового зображення.

Тестові кейси

Див. Тестовий приклад на jsFiddle:

• Використання CSS 2.1: раніше
• Використання CSS 3 :: before

Отже, є інший спосіб:

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

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>

Це можна зробити, використовуючи інший клас div для тексту Привіт там ...

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

Тепер ви можете застосувати стилі до

тег. інакше для класу bg. Я впевнений, що це працює нормально

Я реалізував рішення Маркуса Еквола, але зміг видалити кілька речей, щоб зробити його простішим, і воно все ще працює. Можливо версія 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/

Привіт усім, я зробив це, і це спрацювало добре

	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> 

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

Жодне з рішень не працювало для мене. Якщо все інше не вдається, отримайте зображення у Photoshop та застосуйте певний ефект. 5 хвилин проти стільки часу на це ...