สมมติว่าฉันมี

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

ฉันต้องการที่จะนำbackground-imageและให้มันopacityของ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 pseudo-element

เคล็ดลับอีกประการหนึ่งคือการใช้องค์ประกอบหลอกCSS 2.1 :beforeหรือ CSS 3 pseudo-element ได้รับการสนับสนุนใน IE ตั้งแต่เวอร์ชัน 8 ในขณะที่ไม่รองรับ pseudo-element เลย หวังว่าจะได้รับการแก้ไขในเวอร์ชัน 10::before:before::before

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: before
• ใช้ 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 ฉันแน่ใจว่ามันใช้งานได้ดี

ฉันใช้โซลูชันของ Marcus Ekwallแต่สามารถลบบางอย่างเพื่อให้ง่ายขึ้นและยังใช้งานได้ อาจจะเป็นเวอร์ชัน 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 นาทีเมื่อเทียบกับเวลานี้ ...