Giả sử tôi có

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

Tôi muốn đặt một background-imagevà cung cấp cho nó một opacitycủa 0.5- nhưng tôi muốn rằng các văn bản tôi đã viết sẽ có đầy đủ opacity ( 1).

Nếu tôi viết CSS như thế này

.myDiv { opacity:0.5 }

mọi thứ sẽ có độ mờ thấp - và tôi không muốn điều đó.

Vì vậy, câu hỏi của tôi là - Làm cách nào để có được hình nền có độ mờ thấp với văn bản có độ mờ đầy đủ?

Không, điều này không thể được thực hiện vì opacityảnh hưởng đến toàn bộ phần tử bao gồm cả nội dung của nó và không có cách nào để thay đổi hành vi này. Bạn có thể giải quyết vấn đề này bằng hai phương pháp sau.

Div phụ

Thêm một divphần tử khác vào vùng chứa để giữ nền. Đây là phương pháp thân thiện với nhiều trình duyệt nhất và sẽ hoạt động ngay cả trên 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%;
}

Xem trường hợp thử nghiệm trên jsFiddle

: trước và :: trước phần tử giả

Một thủ thuật khác là sử dụng phần tử giả CSS 2.1 :beforehoặc CSS 3 ::before. :beforephần tử giả được hỗ trợ trong IE từ phiên bản 8, trong khi ::beforephần tử giả hoàn toàn không được hỗ trợ. Điều này hy vọng sẽ được khắc phục trong phiên bản 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;
}

Ghi chú bổ sung

Do hành vi của z-indexbạn, bạn sẽ phải đặt chỉ số z cho vùng chứa cũng như âm z-indexcho hình nền.

Các trường hợp thử nghiệm

Xem trường hợp thử nghiệm trên jsFiddle:

• Sử dụng CSS 2.1: trước đây
• Sử dụng CSS 3 :: trước đây

Vì vậy, đây là một cách khác:

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>

Điều này có thể được thực hiện bằng cách sử dụng lớp div khác nhau cho văn bản Hi There ...

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

Bây giờ bạn có thể áp dụng các kiểu cho

nhãn. ngược lại đối với lớp bg. Tôi chắc chắn rằng nó hoạt động tốt

Tôi đã triển khai giải pháp của Marcus Ekwall nhưng có thể loại bỏ một số thứ để làm cho nó đơn giản hơn và nó vẫn hoạt động. Có thể là phiên bản 2017 của 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/

Xin chào mọi người, tôi đã làm điều này và nó hoạt động tốt

	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>

bao gồm 4 bộ số sẽ làm cho nó trở thành rgba, không phải cmyk, nhưng cả hai cách đều hoạt động (rgba = 00000088, cmyk = 0%, 0%, 0%, 50%)

Không có giải pháp nào phù hợp với tôi. Nếu mọi thứ khác không thành công, hãy chuyển bức ảnh sang Photoshop và áp dụng một số hiệu ứng. 5 phút so với rất nhiều thời gian cho việc này ...