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

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

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

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

.myDiv { opacity:0.5 }

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

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

Нет, это невозможно, так как 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:

• Использование 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 для текста Hi There ...

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

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

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

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

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

	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 минут против столько времени на это ...