Diyelim ki var

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

Ben koymak istiyorum background-imageve bir verin opacityait 0.5- ama ben yazdım metni (tam olarak kapatması sahip olacağını istiyorum 1).

CSS'yi böyle yazarsam

.myDiv { opacity:0.5 }

her şey düşük opaklıkta olacak - ve bunu istemiyorum.

Öyleyse sorum şu - Tam opaklık metinli düşük opaklıklı arka plan resmini nasıl elde edebilirim?

Hayır, opacityiçeriği dahil tüm öğeyi etkilediği için bu yapılamaz ve bu davranışı değiştirmenin bir yolu yoktur. Aşağıdaki iki yöntemle bu sorunu çözebilirsiniz.

İkincil div

divArka planı tutmak için kaba başka bir öğe ekleyin . Bu, tarayıcılar arası en uyumlu yöntemdir ve IE6'da bile çalışacaktır.

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'daki test senaryosuna bakın

: önce ve :: sözde elemandan önce

Diğer bir numara da CSS 2.1 :beforeveya CSS 3 ::beforesözde öğelerini kullanmaktır. :beforesözde eleman, IE sürüm 8'den itibaren desteklenirken, ::beforesözde eleman hiç desteklenmez. Bu, umarız sürüm 10'da düzeltilecektir.

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;
}

Ek Notlar

Davranışınız nedeniyle z-index, kap için bir z-endeksi z-indexve arka plan görüntüsü için bir negatif ayarlamanız gerekecektir .

Test durumları

JsFiddle'daki test senaryosuna bakın:

• CSS 2.1 kullanmak: önce
• CSS 3 kullanımı :: önce

Öyleyse işte başka bir yol:

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>

Bu, Hi There ... metni için farklı div sınıfı kullanılarak yapılabilir.

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

Şimdi stilleri uygulayabilirsiniz

etiket. aksi takdirde bg sınıfı için. İyi çalıştığına eminim

Marcus Ekwall'un çözümünü uyguladım, ancak daha basit hale getirmek için birkaç şeyi kaldırabildim ve hala çalışıyor. Belki html / css'nin 2017 sürümü?

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/

Herkese merhaba, bunu yaptım ve iyi çalış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>

4 set sayı dahil etmek onu cmyk değil rgba yapar, ancak her iki şekilde de çalışır (rgba = 00000088, cmyk =% 0,% 0,% 0,% 50)

Çözümlerden hiçbiri benim için işe yaramadı. Her şey başarısız olursa, resmi Photoshop'a getirin ve biraz efekt uygulayın. Bu konuda çok fazla zamana karşı 5 dakika ...