Pertanyaan Bagaimana saya memberikan teks atau gambar latar belakang transparan menggunakan CSS?


Apakah mungkin, menggunakan CSS saja, untuk membuat background dari elemen semi-transparan tetapi memiliki konten (teks & gambar) dari elemen buram?

Saya ingin mencapai ini tanpa teks dan latar belakang sebagai dua elemen terpisah.

Saat mencoba:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

Sepertinya elemen anak menjadi sasaran keburukan orang tua mereka, jadi opacity:1 relatif terhadap opacity:0.6 dari orang tua.


1997
2018-04-30 09:00


asal


Jawaban:


Entah menggunakan semi transparan PNG gambar atau gunakan CSS3:

background-color:rgba(255,0,0,0.5);

Ini artikel dari css3.info, Opacity, RGBA dan kompromi (2007-06-03).


2115
2017-07-13 20:51



Di Firefox 3 dan Safari 3, Anda dapat menggunakan RGBA suka Georg Schölly disebutkan.

Trik yang sedikit diketahui adalah bahwa Anda dapat menggunakannya di Internet Explorer juga menggunakan filter gradien.

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

Nomor hex pertama mendefinisikan nilai alpha warna.

Solusi lengkap semua browser:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Ini dari Transparansi latar belakang CSS tanpa mempengaruhi elemen anak, melalui RGBa dan filter.

Screenshot bukti hasil:

Ini adalah ketika menggunakan kode berikut:            

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>

Chrome-33 IE11 IE9 IE8


456
2018-04-30 20:42



Ini adalah solusi terbaik yang bisa saya hasilkan, BUKAN menggunakan CSS 3. Dan itu bekerja hebat di Firefox, Chrome, dan Internet Explorer sejauh yang saya bisa lihat.

Masukkan DIV kontainer dan dua DIV anak di tingkat yang sama, satu untuk konten, satu untuk latar belakang. Dan menggunakan CSS, otomatis ukuran latar belakang agar sesuai dengan konten dan meletakkan latar belakang sebenarnya di belakang menggunakan z-index.

    .container {
      position: relative;
    }
    .content {
      position: relative;
      color: White;
      z-index: 5;
    }
    .background {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: Black;
      z-index: 1;
      /* These three lines are for transparency in all browsers. */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      filter: alpha(opacity=50);
      opacity: .5;
    }
<div class="container">
  <div class="content">
    Here is the content.
    <br />Background should grow to fit.
  </div>
  <div class="background"></div>
</div>


97
2018-05-24 16:07



Lebih baik menggunakan semi transparan .png.

Buka saja Photoshop, membuat 2x2 gambar piksel (pemetikan 1x1 dapat menyebabkan bug Internet Explorer!), isi dengan warna hijau dan atur opacity di "Layers tab" menjadi 60%. Kemudian simpan dan buat gambar latar belakang:

<p style="background: url(green.png);">any text</p>

Ini bekerja keren, tentu saja, kecuali indah Internet Explorer 6. Ada perbaikan lebih baik yang tersedia, tetapi berikut ini adalah peretasan cepat:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}

54
2017-10-05 08:15



Untuk warna latar belakang semi transparan sederhana, solusi di atas (gambar CSS3 atau bg) adalah opsi terbaik. Namun, ingin melakukan sesuatu yang lebih menarik (misalnya animasi, banyak latar belakang, dll.), Atau jika Anda tidak ingin mengandalkan CSS3, Anda dapat mencoba "teknik panel":

.pane, .pane > .back, .pane > .cont { display: block; }

.pane {
    position: relative;
}

.pane > .back {
    position: absolute;
    width: 100%; height: 100%;
    top: auto; bottom: auto; left: auto; right: auto;
}

.pane > .cont {
    position: relative;
    z-index: 10;
}
<p class="pane">
    <span class="back" style="background-color: green; opacity: 0.6;"></span>
    <span class="cont" style="color: white;">Hello world</span>
</p>

Teknik ini bekerja dengan menggunakan dua "lapisan" di dalam elemen panel luar:

  • satu ("belakang") yang sesuai dengan ukuran elemen panel tanpa mempengaruhi aliran konten,
  • dan satu ("cont") yang berisi konten dan membantu menentukan ukuran panel.

Itu position: relative di panel penting; itu memberitahu kembali layer agar sesuai dengan ukuran panel. (Jika Anda membutuhkan <p> tag menjadi absolut, ubah panel dari a <p> ke a <span> dan membungkus semua itu dalam posisi mutlak <p> menandai.)

Keuntungan utama teknik ini memiliki lebih dari yang serupa yang tercantum di atas adalah bahwa panel tidak harus menjadi ukuran yang ditentukan; seperti yang dikodekan di atas, akan sesuai dengan lebar penuh (tata letak elemen-blok normal) dan hanya setinggi konten. Elemen pane luar dapat berukuran apa pun yang Anda suka, selama itu persegi panjang (yaitu blok-inline akan berfungsi; tidak akan ada garis besar polos).

Juga, itu memberi Anda banyak kebebasan untuk latar belakang; Anda bebas menaruh apa pun di elemen belakang dan tidak memengaruhi aliran konten (jika Anda ingin beberapa sub-lapisan ukuran penuh, pastikan saja mereka juga memiliki posisi: absolut, lebar / tinggi: 100%, dan atas / bawah / kiri / kanan: otomatis).

Satu variasi untuk memungkinkan penyesuaian inset latar belakang (melalui atas / bawah / kiri / kanan) dan / atau penyematan latar belakang (melalui menghapus salah satu pasangan kiri / kanan atau atas / bawah) adalah dengan menggunakan CSS sebagai berikut:

.pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}

Seperti yang tertulis, ini berfungsi di Firefox, Safari, Chrome, IE8 +, dan Opera, meskipun IE7 dan IE6 memerlukan ekstra CSS dan ekspresi, IIRC, dan terakhir kali saya periksa, variasi CSS kedua tidak berfungsi di Opera.

Hal-hal yang harus diperhatikan:

  • Elemen mengambang di dalam lapisan cont tidak akan terkandung. Anda harus memastikan mereka bersih atau terkandung, atau mereka akan keluar dari bawah.
  • Margin masuk ke elemen panel dan padding berjalan pada elemen cont. Jangan gunakan kebalikannya (margin pada cont atau padding pada panel) atau Anda akan menemukan keanehan seperti halaman selalu menjadi sedikit lebih lebar dari jendela browser.
  • Seperti yang telah disebutkan, semuanya harus di blok atau sebaris. Jangan ragu untuk menggunakannya <div>bukannya <span>untuk menyederhanakan CSS Anda.

Demo yang lebih lengkap, memamerkan fleksibilitas teknik ini dengan menggunakannya bersama-sama display: inline-block, dan dengan keduanya auto & spesifik widths /min-heights:

.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
	position: relative;
	width: 175px; min-height: 100px;
	margin: 8px;
}

.pane > .back {
	position: absolute; z-index: 1;
	width: auto; height: auto;
	top: 8px; bottom: 8px; left: 8px; right: 8px;
}

.pane > .cont {
	position: relative; z-index: 10;
}

.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>

Dan inilah a demo langsung teknik yang digunakan secara ekstensif:

christmas-card-2009.slippyd.com screenshot


51
2018-04-30 09:11



Ada trik untuk meminimalkan markup: Gunakan a elemen semu sebagai latar belakang dan Anda dapat mengatur opacity ke sana tanpa mempengaruhi elemen utama dan anak-anaknya:

DEMO

Keluaran:

Background opacity with a pseudo element

Kode yang relevan:

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}
/*** The following is just for demo styles  ***/

body {
  background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
  background-size: cover;
}
p {
  width: 50%;
  padding: 1em;
  margin: 10% auto;
  font-family: arial, serif;
  color: #000;
}
img {
  display: block;
  max-width: 90%;
  margin: .6em auto;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
  <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>

Dukungan browser Internet Explorer 8 dan kemudian.


47
2018-01-14 00:14



Metode termudah adalah menggunakan latar belakang semi-transparan Gambar PNG.

Anda dapat menggunakan JavaScript untuk membuatnya berfungsi Internet Explorer 6 jika perlu.

Saya menggunakan metode yang diuraikan di PNG transparan di Internet Explorer 6.

Selain itu,

Anda bisa memalsukannya menggunakan two side-by-side sibling elements - buat satu semi transparan, kemudian absolutely position the other over the top?


23
2018-04-30 09:14



Metode ini memungkinkan Anda untuk memiliki gambar di latar belakang dan tidak hanya warna yang solid, dan dapat digunakan untuk memiliki transparansi pada atribut lain seperti batas. Tidak diperlukan gambar PNG transparan.

Menggunakan :before (atau :after) dalam CSS dan memberi mereka nilai opasitas untuk meninggalkan elemen pada opasitas aslinya. Dengan demikian Anda dapat menggunakan: sebelum membuat elemen palsu dan memberikan latar belakang transparan (atau batas) yang Anda inginkan dan memindahkannya di belakang konten yang Anda ingin tetap buram dengan z-index.

Sebuah contoh (biola) (perhatikan bahwa DIV dengan kelas dad hanya untuk memberikan beberapa konteks dan kontras dengan warna, elemen tambahan ini sebenarnya tidak diperlukan, dan persegi panjang merah dipindahkan sedikit ke bawah dan ke kanan untuk meninggalkan terlihat latar belakang di belakang fancyBgelemen):

<div class="dad">
    <div class="fancyBg">
        Test text that should have solid text color lets see if we can manage it without extra elements
    </div>
</div>

dengan CSS ini:

.dad {
    background: lime; border: 1px double black; margin: 1ex 2ex;
    padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
    border: 1px dashed black; position: relative; color: white; font-weight: bold;
    z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
    position: absolute; background: red; opacity: .5;
    top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
    /*top: 0; right: 0; bottom: 0; left: 0;*/
    z-index: -1;
}

Pada kasus ini .fancyBg:before memiliki properti CSS yang ingin Anda miliki dengan transparansi (latar belakang merah dalam contoh ini, tetapi bisa berupa gambar atau batas). Itu diposisikan sebagai mutlak untuk memindahkannya ke belakang .fancyBg (gunakan nilai nol atau apa pun yang lebih sesuai dengan kebutuhan Anda).


20
2018-01-26 16:36



Masalahnya adalah, bahwa teks sebenarnya MEMILIKI opasitas penuh dalam contoh Anda. Ini memiliki opacity penuh di dalam p tag, tetapi p tag hanya semi-transparan.

Anda bisa menambahkan gambar latar belakang PNG semi-transparan daripada menyadarinya dalam CSS, atau memisahkan teks dan div menjadi 2 elemen dan memindahkan teks ke kotak (misalnya, margin negatif).

Kalau tidak, itu tidak akan mungkin.

EDIT:

Sama seperti Chris disebutkan: jika Anda menggunakan file PNG dengan transparansi, Anda harus menggunakan solusi JavaScript untuk membuatnya bekerja di Internet Explorer yang menjengkelkan ...


14
2017-10-25 13:55



Hampir semua jawaban ini mengasumsikan desainer menginginkan latar belakang warna yang solid. Jika perancang benar-benar menginginkan foto sebagai latar belakang satu-satunya solusi nyata saat ini adalah JavaScript seperti plugin Transify jQuery disebutkan di tempat lain.

Apa yang perlu kita lakukan adalah bergabung dengan diskusi kelompok kerja CSS dan membuat mereka memberi kita atribut background-opacity! Ini harus bekerja bergandengan tangan dengan fitur multi-latar belakang.


14
2018-04-30 09:13