Katakanlah saya punya

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

Saya ingin menempatkan background-imagedan memberikan sebuah opacityof 0.5- tetapi saya ingin bahwa teks saya tulis akan memiliki opacity penuh ( 1).

Jika saya akan menulis CSS seperti ini

.myDiv { opacity:0.5 }

semuanya akan berada dalam opasitas rendah - dan saya tidak menginginkannya.

Jadi pertanyaan saya adalah - Bagaimana saya bisa mendapatkan gambar latar dengan opasitas rendah dengan teks opasitas penuh?

Tidak, ini tidak dapat dilakukan karena opacitymemengaruhi seluruh elemen termasuk kontennya dan tidak ada cara untuk mengubah perilaku ini. Anda dapat mengatasinya dengan dua metode berikut.

Div sekunder

Tambahkan divelemen lain ke wadah untuk menahan latar belakang. Ini adalah metode yang paling ramah lintas-browser dan akan berfungsi bahkan di 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%;
}

Lihat kasus uji di jsFiddle

: before dan :: before pseudo-element

Trik lain adalah dengan menggunakan pseudo-elemen CSS 2.1 :beforeatau CSS 3 ::before. :beforepseudo-element didukung di IE dari versi 8, sedangkan ::beforepseudo-element tidak didukung sama sekali. Ini mudah-mudahan akan diperbaiki dalam versi 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;
}

Catatan tambahan

Karena perilaku z-indexAnda harus menetapkan indeks-z untuk penampung serta negatif z-indexuntuk gambar latar belakang.

Kasus uji

Lihat kasus uji di jsFiddle:

• Menggunakan CSS 2.1: sebelumnya
• Menggunakan CSS 3 :: before

Jadi inilah cara lain:

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>

Ini dapat dilakukan dengan menggunakan kelas div yang berbeda untuk teks Hi There ...

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

Sekarang Anda dapat menerapkan gaya ke file

menandai. sebaliknya untuk kelas bg. Saya yakin ini berfungsi dengan baik

Saya menerapkan solusi Marcus Ekwall tetapi dapat menghapus beberapa hal agar lebih sederhana dan masih berfungsi. Mungkin html / css versi 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/

Halo untuk semua orang, saya melakukan ini dan berhasil dengan baik

	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>

memasukkan 4 set angka akan membuatnya menjadi rgba, bukan cmyk, tetapi cara mana pun akan berhasil (rgba = 00000088, cmyk = 0%, 0%, 0%, 50%)

Tidak ada solusi yang berhasil untuk saya. Jika semuanya gagal, bawa gambar ke Photoshop dan terapkan beberapa efek. 5 menit versus begitu banyak waktu untuk ini ...