Powiedzmy, że tak

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

Chcę wstawić a background-imagei nadać mu opacityof 0.5- ale chcę, aby napisany przeze mnie tekst miał pełne krycie ( 1).

Gdybym napisał CSS w ten sposób

.myDiv { opacity:0.5 }

wszystko będzie mało nieprzezroczyste - a tego nie chcę.

Moje pytanie brzmi więc - Jak uzyskać obraz tła o niskiej przezroczystości z pełnym tekstem nieprzezroczystym?

Nie, nie można tego zrobić, ponieważ opacitywpływa na cały element, w tym na jego zawartość, i nie ma możliwości zmiany tego zachowania. Możesz obejść ten problem za pomocą dwóch następujących metod.

Wtórny div

Dodaj kolejny divelement do kontenera, aby utrzymać tło. Jest to metoda najbardziej przyjazna dla różnych przeglądarek i będzie działać nawet w 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%;
}

Zobacz przypadek testowy na jsFiddle

: before i :: before pseudo-element

Inną sztuczką jest użycie pseudoelementów CSS 2.1 :beforelub CSS 3 ::before. :beforepseudoelement jest obsługiwany w IE od wersji 8, podczas gdy ::beforepseudoelement w ogóle nie jest obsługiwany. Miejmy nadzieję, że zostanie to naprawione w wersji 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;
}

Dodatkowe uwagi

Ze względu na z-indextwoje zachowanie będziesz musiał ustawić indeks z dla kontenera, a także negatyw z-indexdla obrazu tła.

Przypadki testowe

Zobacz przypadek testowy na jsFiddle:

• Korzystanie z CSS 2.1: przed
• Korzystanie z CSS 3 :: before

Oto inny sposób:

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>

Można to zrobić, używając różnych klas div dla tekstu Cześć, tam ...

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

Teraz możesz zastosować style do pliku

etykietka. inaczej dla klasy bg. Jestem pewien, że działa dobrze

I wdrożone rozwiązanie Marcus Ekwall za ale był w stanie usunąć kilka rzeczy, aby uprościć i nadal działa. Może wersja 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/

Witam wszystkich Zrobiłem to i zadziałało dobrze

	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>

włączenie 4 zestawów liczb sprawi, że będzie to rgba, a nie cmyk, ale tak czy inaczej zadziała (rgba = 00000088, cmyk = 0%, 0%, 0%, 50%)

Żadne z rozwiązań nie zadziałało. Jeśli wszystko inne zawiedzie, przenieś obraz do Photoshopa i zastosuj jakiś efekt. 5 minut, a tyle czasu na tym ...