Dapatkah saya menyetel opasitas hanya ke gambar latar belakang div?


89

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?


stackoverflow.com/questions/6624457/… Perhatikan bahwa saya memiliki komentar di sana (di bawah jawaban Phil) menunjukkan cara untuk melakukannya dengan opacity css, jika itu cara yang disukai. ( jsfiddle.net/4tTNZ )
Joonas

Ini jawabannya jauh lebih ringkas dan saya percaya adalah persis sama.
JohnAllen

Jawaban:


104

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:


2
Saya sangat paranoid ketika menggunakan nilai negatif dengan indeks-z .. tapi, saya tidak bisa membantah hasil. Howevveer, saya akan menambahkan width: 100%; height: 100%;ke .bgsehingga IE6 dapat menyebarkan bg dalam div induk. jsfiddle.net/sbGb4/2
Joonas

Saya pikir ada trik css3 yang saya lewatkan - tapi ini bagus juga!
Alon

@Lollero poin yang bagus! z-indexmemang menyebalkan, tetapi ini seharusnya relatif aman selama Anda memberikan indeks positif kepada orang tua.
mekwall

@Alon jika Anda memeriksa komentar yang saya tulis di bawah posting Pertanyaan Anda. Saya memiliki tautan di sana ke pertanyaan lain yang memiliki beberapa opsi lain Termasuk rgba Yang merupakan opsi css3. Berikut ini trik yang cukup bagus untuk yang lebih tua yaitu .. css-tricks.com/2151-rgba-browser-support
Joonas

@Alon Saya menambahkan metode lain menggunakan ::beforeelemen semu. Apakah ini yang Anda cari?
mekwall

160

Jadi inilah cara lain:

background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");

3
@jj_: Karena waktu itu dukungannya sangat terbatas linear-gradient. Jawaban diterima yang saya tulis berusia lebih dari 4 tahun;)
mekwall

3
Mungkin Anda dapat menambahkan komentar atau sedikit pembaruan pada pertanyaan Anda, menginformasikan bahwa ini sekarang adalah cara baru yang baik untuk melakukannya. Sampai jumpa dalam 4 tahun untuk pembaruan baru;)
jj_

@jj_: Sebenarnya, solusi ini tidak membuat gambar menjadi transparan. Itu hanya menambahkan lapisan putih dengan transparansi 50% di atasnya. Karenanya, ini bukan jawaban yang valid untuk pertanyaan itu.
mekwall

8
Saya pikir kita bisa setuju bahwa itu mencapai maksud pertanyaan jadi ya itu jawaban yang valid untuk pertanyaan itu.
David Clarke

ya .. jawaban ini cukup banyak adalah yang paling sederhana di luar sana ..
selain itu

4

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>

0

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


0

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/


1
Ini melakukan hal yang sama dengan "div Sekunder" dalam jawaban saya, dengan satu-satunya perbedaan adalah Anda menghilangkan z-index (mungkin saja ini berperilaku berbeda hari ini dan mungkin juga bergantung pada browser). Namun mempercayai browser untuk berperilaku seperti yang diharapkan biasanya merupakan ide yang buruk.
mekwall

0

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> 


0
<!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%)


-1

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 ...

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.