Bagaimana cara memberikan latar belakang transparan teks atau gambar menggunakan CSS?

2283

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

Saya ingin menyelesaikan 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>

Luaskan cuplikan

Sepertinya elemen anak-anak tunduk pada opacity orang tua mereka, sehingga opacity:1relatif terhadap opacity:0.6orang tua.

html css opacity Stijn Sanders
sumber

16

Sayangnya tidak, CSS3 menargetkan memperbaiki ini dengan modul warna baru, itu akan memungkinkan Anda untuk menentukan nilai alfa setiap kali Anda menyatakan warna. w3.org/TR/css3-color

meandmycode

71

Sebenarnya, opacity elemen anak dikalikan dengan opacity elemen induk, bukan diganti. Jadi misalnya jika popacity itu .6dan spanopacity itu .5maka opacity teks yang sebenarnya dalam rentang tersebut 0.3.

chharvey

1

Kira begitu, tetapi karena latar belakangnya yang tembus cahaya, Anda bahkan tidak perlu filter / opacity: codepen.io/anon/pen/ksJug

Stijn Sanders

5

@chharvey apa yang seharusnya terjadi jika saya mendefinisikan opacity:.5untuk elemen induk dan opacity:2elemen anak?

Alexander

10

@Alexander, saya senang Anda menanyakan pertanyaan itu. Secara matematis, orang akan menduga anak itu akan kembali kembali ke opacity 1. Namun, opacity:2;adalah CSS valid . Nilai opacityproperti harus dalam kisaran inklusif [0,1].

chharvey

2276

Baik menggunakan gambar PNG semi-transparan atau menggunakan CSS 3:

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

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

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>

Luaskan cuplikan

Peter Mortensen
sumber

86

apakah mungkin untuk melakukan ini dengan warna hex? Suka #fff?

GRM

35

@ grm: W3C mempertimbangkan memperkenalkan format kode hex #RRGGBBAA, tetapi mereka memutuskan untuk tidak (karena berbagai alasan), jadi kami tidak bisa.

outis

95

@ grm dengan SASS You can,background-color: rgba(#000, .5);

Jürgen Paul

2

Layak menunjukkan bahwa jika Anda ingin menggunakan transparansi, setiap browser yang mendukung RGBA juga mendukung HSLA , yang merupakan pemetaan warna yang jauh lebih intuitif. IE8 adalah satu-satunya pseudosignificant browser yang gagal mendukungnya, jadi cegah yang melanjutkan dan gunakan HSL (A) untuk setiap warna.

iono

19

@outis: Berita bagus, #RRGGBBAA sekarang dalam level Warna 4 .

BoltClock

476

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

Trik yang sedikit diketahui adalah Anda bisa 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 heks pertama mendefinisikan nilai alfa 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 .

Tangkapan layar bukti hasil:

Ini saat 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

Adrien Be
sumber

1

Tetapi tidak di IE8. Saya mencoba sintaks -MS-filter baru tetapi masih tidak bekerja untuk saya :(

philfreo

5

Posting ini menunjukkan bagaimana melakukannya di IE8: robertnyman.com/2010/01/11/…

Slapout

14

@ philfreo: Jika Anda mengubah bit pertama dari kode Sebastian ke "background: rgb (0, 0, 0) transparan;" seharusnya sekarang bekerja di IE8. Ini menggangguku selama beberapa waktu!

Tom Chantler

filter: progid Bekerja hebat dengan IE 9. warna adalah: transparansi, merah, hijau, biru - semua nilai hex dua digit.

Thorsten Niehues

1

@AdrienBe - Saya mengedit jawaban Anda sesuai instruksi Anda. Sayangnya saya telah keluar dari ruang utama dari Tanya Jawab khusus ini untuk beberapa waktu, jadi saya tidak dapat menambahkan ke percakapan ini saat ini.

user664833

108

Ini adalah solusi terbaik yang bisa saya buat, BUKAN menggunakan CSS 3. Dan itu berfungsi dengan baik di Firefox, Chrome, dan Internet Explorer sejauh yang saya bisa lihat.

Letakkan wadah divdan dua anak divdi tingkat yang sama, satu untuk konten, satu untuk latar belakang. Dan menggunakan CSS, ukuran otomatis latar belakang agar sesuai dengan konten dan menempatkan 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>

Luaskan cuplikan

Gorkem Pacaci
sumber

19

Dia berkata "Tanpa memisahkan teks dan latar belakang dalam dua elemen yang diposisikan satu sama lain." Bagaimanapun juga, ini adalah perbaikan yang baik dan berguna, tetapi dalam beberapa kasus Anda ingin elemen buram menjadi anak yang semi transparan.

Rolf

Saya menjawab hampir sama pada pertanyaan SO yang lain tetapi menambahkan bukti jsfiddle & tangkapan layar (IE7 +), lihat di sini jika tertarik stackoverflow.com/a/21984546/759452

Adrien Be

@Gorkem Pacaci: Pastikan properti opacity "benar-benar" cross-browser, Anda dapat menggunakan potongan kode ini dari CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity

Adrien Be

Mengapa tidak melakukannya dengan elemen pseudo seperti :afterdan menghindari markup tambahan?

AndFisher

64

Untuk warna latar semi-transparan sederhana, solusi di atas (gambar CSS3 atau bg) adalah pilihan terbaik. Namun, jika Anda ingin melakukan sesuatu yang lebih menarik (mis. Animasi, banyak latar belakang, dll.), Atau jika Anda tidak ingin bergantung pada CSS3, Anda dapat mencoba "teknik pane":

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

The position: relativepada panel penting; itu memberitahu lapisan belakang agar sesuai dengan ukuran panel. (Jika Anda ingin tag menjadi absolut, ubah panel dari a ke a dan bungkus semua itu dalam tag posisi absolut .)

Keuntungan utama teknik ini memiliki lebih dari yang serupa yang tercantum di atas adalah bahwa panel tidak harus menjadi ukuran yang ditentukan; seperti dikodekan di atas, itu akan cocok dengan lebar penuh (tata letak elemen blok normal) dan hanya setinggi konten. Elemen panel luar dapat ukuran sesuka Anda, selama itu persegi panjang (yaitu blok inline akan berfungsi; inline biasa tidak akan).

Juga, itu memberi Anda banyak kebebasan untuk latar belakang; Anda bebas untuk meletakkan apa pun di elemen belakang dan membuatnya tidak mempengaruhi aliran konten (jika Anda ingin beberapa sub-layer ukuran penuh, pastikan 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 (dengan menghapus salah satu pasangan kiri / kanan atau atas / bawah) adalah menggunakan CSS berikut sebagai gantinya:

.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 membutuhkan CSS dan ekspresi tambahan, IIRC, dan terakhir kali saya memeriksa, variasi CSS kedua tidak berfungsi di Opera.

Hal-hal yang harus diperhatikan:

Elemen mengambang di dalam lapisan cont tidak akan terkandung. Anda harus memastikan semuanya sudah bersih atau terkandung, atau mereka akan keluar dari bawah.
Margin pergi pada elemen panel dan padding pergi pada elemen cont. Jangan gunakan sebaliknya (margin pada cont atau padding pada panel) atau Anda akan menemukan keanehan seperti halaman yang selalu sedikit lebih lebar dari jendela browser.
Seperti yang disebutkan, semuanya harus berupa blok atau inline-blok. Jangan ragu untuk menggunakan <div>s bukannya s untuk menyederhanakan CSS Anda.

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

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

Luaskan cuplikan

Dan inilah demo langsung dari teknik yang digunakan secara luas:

Slipp D. Thompson
sumber

Dalam situasi apa seseorang tidak ingin menggunakan CSS3 untuk ini?

Burkely91

@ Burkely91 Jika Anda bisa melakukannya di CSS3, maka gunakan itu sepenuhnya. Tetapi latar belakang CSS3 tidak mendukung semua jenis konten atau fleksibilitas tata letak penuh. Contoh amplop / huruf di atas akan sulit untuk dibuat dengan CSS3 karena tepi yang berulang secara independen dan isian tengah. Juga, perlu diingat bahwa jawaban ini awalnya ditulis 5 tahun yang lalu, sebelum dukungan CSS3 tersebar luas.

Slipp D. Thompson

2

@Igor Ivancha Memutar balik perubahan Anda. Maaf, mengubah lekukan dari formulir (tab) pilihan saya ke formulir Anda (2 spasi) tidaklah keren. Anda mungkin memiliki alasan yang baik untuk menggunakan lekukan 2-ruang dalam proyek kode sehari-hari Anda, tetapi untuk presentasi di web saya percaya tab memiliki kemenangan yang jelas— lekukan yang lebih dalam membuatnya lebih mudah untuk membedakan tingkat hierarki, dan itu jauh lebih mudah untuk mengkonversi tab ke spasi secara andal dan juga merupakan bentuk yang lebih kompatibel dari semua pembaca.

Slipp D. Thompson

@ Igor Ivancha Juga, tampaknya Anda menjalankan kode melalui beautifier yang menempatkan setiap pemilih CSS dan properti pada barisnya sendiri. Contoh-contoh saya ditulis dengan jeda baris yang disengaja dan spasi ke potongan-potongan kelompok logis yang harus dipahami bersama oleh pembaca - misalnya sebagian besar width:& height:properti berbagi garis karena mereka jenis konstruksi yang sama dan lebih dipahami sebagai bentuk 2 dimensi, bukan sepasang kendala 1 dimensi. Lebih lanjut, beberapa baris memiliki jumlah yang cukup untuk dikemas karena mereka mengulangi konten yang tidak terlalu penting untuk dipamerkan.

Slipp D. Thompson

@Igor Ivancha Organisasi logis, pengelompokan, dan penataan sangat penting untuk menulis kode yang waras dan dapat dipahami, sama halnya dengan semua jenis penulisan. Perubahan yang Anda lakukan sama dengan masuk ke posting seseorang dan menghapus semua jeda paragraf, dan menempatkan baris baru paksa setelah setiap kalimat. Jika Anda ingin menjadi terlalu boros dalam pekerjaan Anda sendiri, oke, Anda bebas untuk melakukannya. Tapi tolong jangan membodohi karakter dan ekspresi semantik dalam karya orang lain.

Slipp D. Thompson

58

Lebih baik menggunakan semi-transparan.png .

Cukup buka Photoshop , buat 2x2gambar piksel ( memetik 1x1dapat menyebabkan bug Internet Explorer! ), Isi dengan warna hijau dan atur opacity di "Layers tab" menjadi 60%. Kemudian simpan dan jadikan gambar latar belakang:

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

Ini bekerja keren, tentu saja, kecuali di Internet Explorer 6 yang indah . Ada perbaikan yang lebih baik yang tersedia, tetapi inilah hack 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');
}

Komunitas
sumber

54

Ada trik untuk meminimalkan markup: Gunakan elemen pseudo sebagai latar belakang dan Anda dapat mengatur opacity untuk itu tanpa mempengaruhi elemen utama dan anak-anaknya:

DEMO

Keluaran:

Background opacity dengan elemen pseudo

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>

Luaskan cuplikan

Dukungan browser adalah Internet Explorer 8 dan yang lebih baru.

web-tiki
sumber

23

Metode termudah adalah dengan menggunakan gambar PNG latar belakang semi-transparan .

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

Saya menggunakan metode yang diuraikan dalam PNG Transparan di Internet Explorer 6 .

Selain itu, Anda bisa memalsukannya menggunakan dua elemen saudara berdampingan - buat satu semi-transparan , lalu posisikan yang lainnya di atas .

Chris
sumber

2

Yang saya butuhkan adalah warna latar belakang yang sederhana, ukuran PNG mana yang akan Anda usulkan dengan warna ini? 1x1 akan membuat rendering melakukan banyak pekerjaan, terlalu banyak piksel membuat PNG ini cukup besar (harus ok ukuran file sejak dikompresi, tetapi masih rendering perlu membuka kompres untuk menggunakannya) ...

Stijn Sanders

3

Saya akan merekomendasikan sesuatu seperti 30px x 30px, yang menggunakan lebih sedikit memori ketika membuatnya berulang dari 1x1, dan masih cukup kecil untuk meminimalkan penggunaan bandwidth.

Chris

21

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

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

Contoh ( biola ) (perhatikan bahwa DIVkelas with dadhanya untuk memberikan beberapa konteks dan kontras dengan warna, elemen tambahan ini sebenarnya tidak diperlukan, dan persegi panjang merah digerakkan sedikit ke bawah dan ke kanan untuk meninggalkan latar belakang yang terlihat di belakang. yang 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;
}

Dalam hal ini .fancyBg:beforememiliki properti CSS yang ingin Anda miliki dengan transparansi (latar belakang merah dalam contoh ini, tetapi dapat berupa gambar atau batas). Diposisikan mutlak untuk memindahkannya .fancyBg(gunakan nilai nol atau apa pun yang lebih sesuai dengan kebutuhan Anda).

bekukoi
sumber

17

Masalahnya adalah, teks tersebut sebenarnya memiliki opacity penuh dalam contoh Anda. Ini memiliki opacity penuh di dalam ptag, tetapi ptag itu hanya semi-transparan.

Anda dapat menambahkan gambar latar belakang PNG semi-transparan alih-alih menyadarinya dalam CSS, atau memisahkan teks dan div menjadi dua elemen dan memindahkan teks di atas kotak (misalnya, margin negatif).

Kalau tidak, itu tidak akan mungkin.

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

SvenFinke
sumber

15

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

Yang perlu kita lakukan adalah bergabung dengan diskusi kelompok kerja CSS dan membuat mereka memberi kita atribut latar belakang-opacity! Ini harus bekerja bahu membahu dengan fitur multi-latar belakang.

lebih tebal
sumber

14

Inilah cara saya melakukan ini (mungkin tidak optimal, tetapi berfungsi):

Buat divyang Anda inginkan semi-transparan. Berikan kelas / id. Biarkan kosong , dan tutup. Berikan tinggi dan lebar yang ditetapkan (misalnya, 300 piksel kali 300 piksel). Berikan opacity 0,5 atau apa pun yang Anda suka, dan warna latar belakang.

Kemudian, langsung di bawah div itu, buat div lain dengan kelas / id yang berbeda. Buat paragraf di dalamnya, tempat Anda akan meletakkan teks Anda. Beri divposisi: relatif, dan atas: -295px(itu negatif 295 piksel). Berikan z-indeks 2 untuk ukuran yang baik, dan pastikan opacity-nya adalah 1. Gaya paragraf yang Anda inginkan, tetapi pastikan dimensi kurang dari yang pertama divsehingga tidak meluap.

Itu dia. Berikut kodenya:

.trans {
  opacity: 0.5;
  height: 300px;
  width: 300px;
  background-color: orange;
}
.trans2 {
  opacity: 1;
  position: relative;
  top: -295px;
}
.trans2 p {
  width: 295px;
  color: black;
  font-weight: bold;
}

<body>
  <div class="trans">
  </div>
  <div class="trans2">
    <p>
      text text text
    </p>
  </div>
</body>

Luaskan cuplikan

Ini berfungsi di Safari 2.x, tapi saya tidak tahu tentang Internet Explorer.

paris ionescu
sumber

Elemen tambahan dapat dihindari dan sebagai gantinya menggunakan elemen pseudo seperti :beforeatau:after

frozenkoi

12

Berikut ini adalah plugin jQuery yang akan menangani segalanya untuk Anda, Transify ( Transify - plugin jQuery untuk dengan mudah menerapkan transparansi / opacity ke latar belakang elemen ).

Saya mengalami masalah ini setiap saat, jadi saya memutuskan untuk menulis sesuatu yang akan membuat hidup jauh lebih mudah. Script kurang dari 2 KB dan hanya membutuhkan satu baris kode untuk membuatnya bekerja, dan itu juga akan menangani menjiwai opacity dari latar belakang jika Anda suka.

joren
sumber

11

Beberapa waktu yang lalu, saya menulis tentang ini di Cross Browser Background Transparency With CSS .

Dengan aneh Internet Explorer 6 akan memungkinkan Anda untuk membuat latar belakang transparan dan menjaga teks di atas sepenuhnya buram. Untuk browser lain saya kemudian menyarankan menggunakan file PNG transparan.

Philnash
sumber

10

Keburaman latar belakang, tetapi tidak teks memiliki beberapa ide. Baik menggunakan gambar semi-transparan, atau overlay elemen tambahan.

ketakutan
sumber

9

Jika Anda seorang pria Photoshop , Anda juga dapat menggunakan:

 #some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }

Atau:

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}

suraj rawat
sumber

8

Untuk membuat latar belakang elemen semi-transparan, tetapi memiliki konten (teks & gambar) elemen buram, Anda perlu menulis kode CSS untuk gambar itu, dan Anda harus menambahkan satu atribut yang disebut opacitydengan nilai minimum.

Sebagai contoh,

.image {
   position: relative;
   background-color: cyan;
   opacity: 0.7;
}

// Semakin kecil nilainya, semakin transparan, bijih nilainya kurang akan transparan.

Pushp Singh
sumber

Ini adalah salah satu cara untuk melakukannya di browser modern. Saya menggabungkannya dengan nilai rgba sebagai fallback

Tahir Khalid

Ya benar. Ini adalah salah satu cara untuk berurusan dengan browser modern.

Pushp Singh

Apa yang Anda maksud dengan "bijih nilai kurang akan transparansi" (sepertinya tidak bisa dipahami)? (Tanggapi dengan mengedit jawaban Anda , tidak di sini dalam komentar, jika sesuai.)

Peter Mortensen

7

CSS 3 memiliki solusi mudah untuk masalah Anda. Menggunakan:

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

Di sini, rgbasingkatan dari nilai merah, hijau, biru, dan alfa. Nilai hijau diperoleh karena 255 dan setengah transparansi diperoleh dengan nilai 0,5 alpha.

Touhid Rahman
sumber

Bagaimana ini berbeda dari beberapa jawaban sebelumnya?

Peter Mortensen

6

Jika Anda menggunakan Less , Anda dapat menggunakan fade(color, 30%).

alex
sumber

6

background-color: rgba (255, 0, 0, 0.5); seperti yang disebutkan di atas adalah jawaban terbaik. Untuk mengatakan menggunakan CSS 3, bahkan pada tahun 2013, tidak sederhana karena tingkat dukungan dari berbagai browser berubah setiap iterasi.

Meskipun background-colordidukung oleh semua browser utama (bukan yang baru untuk CSS 3) [1] transparansi alpha bisa rumit, terutama dengan Internet Explorer sebelum versi 9 dan dengan warna perbatasan pada Safari sebelum versi 5.1. [2]

Menggunakan sesuatu seperti Compass atau SASS dapat sangat membantu produksi dan kompatibilitas lintas platform.

[1] W3Schools: Properti CSS-warna latar belakang

[2] Blog Norman: Daftar Periksa Dukungan Browser CSS3 (Oktober 2012)

Will Nielsen
sumber

4

Anda dapat menyelesaikan ini untuk Internet Explorer 8 dengan (ab) menggunakan sintaks gradien. Format warna adalah ARGB. Jika Anda menggunakan preprosesor Sass, Anda dapat mengonversi warna menggunakan fungsi bawaan "ie-hex-str ()".

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";

Henrik
sumber

4

Anda dapat menggunakan murni CSS 3 : rgba(red, green, blue, alpha), di mana alphaadalah tingkat transparansi yang Anda inginkan. Tidak perlu JavaScript atau jQuery.

Berikut ini sebuah contoh:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}

Peter Mortensen
sumber

3

<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/ ?

premgowda
sumber

2

Anda dapat melakukannya dengan rgba color codemenggunakan CSS seperti contoh di bawah ini.

.imgbox img{
  height: 100px;
  width: 200px;
  position: relative;
}
.overlay{
  background: rgba(74, 19, 61, 0.4);
  color: #FFF;
  text-shadow: 0px 2px 5px #000079;
  height: 100px;
  width: 300px;
  position: absolute;
  top: 10%;
  left: 25%;
  padding: 25px;
}

<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
  <div class="overlay">
    <p>This is Simple Text.</p>
  </div>
</div>

Luaskan cuplikan

Rudra
sumber

1

Ada solusi yang lebih mudah untuk meletakkan overlay pada gambar pada div yang sama. Ini bukan penggunaan yang tepat dari alat ini. Tetapi berfungsi seperti pesona untuk membuat hamparan menggunakan CSS.

Gunakan bayangan inset seperti ini:

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

Itu saja :)

edd2110
sumber

1

Anda dapat menggunakan RGBA (red, green, blue, alpha) di CSS . Sesuatu seperti ini:

Jadi hanya melakukan sesuatu seperti ini akan berhasil dalam kasus Anda:

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}

Alireza
sumber

1

Sesuai sudut pandang saya, cara terbaik untuk menggunakan warna latar belakang dengan opacity adalah sebagai berikut. Jika kita menggunakan ini, maka kita tidak akan kehilangan opacity untuk elemen lain, seperti warna tes, batas, dll.

background-color: rgba(71, 158, 0, 0.8);

Gunakan warna latar belakang dengan opacity

background-color: rgba(R, G, B, Opacity);

Vinod Kumar
sumber

0

Saya biasanya menggunakan kelas ini untuk pekerjaan saya. Itu cukup bagus.

.transparent {
  filter: alpha(opacity=50); /* Internet Explorer */
  -khtml-opacity: 0.5;       /* KHTML and old Safari */
  -moz-opacity: 0.5;         /* Firefox and Netscape */
  opacity: 0.5;              /* Firefox, Safari, and Opera */
}

Luaskan cuplikan

Cengkuru Michael
sumber

0

Itu bekerja untuk saya ketika menggunakan format #AARRGGBBsehingga yang bekerja untuk saya adalah #1C00ff00. Cobalah, karena saya telah melihatnya bekerja untuk beberapa orang dan tidak bekerja untuk orang lain. Saya menggunakannya dalam CSS.

Donald Shahini
sumber

0

Anda dapat menggunakan nilai opacity ditambahkan ke nilai heksadesimal:

background-color: #11ffeeaa;

Dalam contoh ini aaadalah opacity. Opacity 00berarti transparan dan ffberarti warna solid.

Opacity adalah opsional, sehingga Anda dapat menggunakan nilai heksadesimal seperti biasa:

background-color: #11ffee;

Anda juga dapat menggunakan cara lama dengan rgba():

background-color: rgba(117, 190, 218, 0.5);

Dan backgroundsingkatan jika Anda ingin memastikan bahwa latar belakang tidak memiliki gaya lain, seperti gambar atau gradien:

background: #11ffeeaa;

Dari spesifikasi Mozilla ( https://developer.mozilla.org/en-US/docs/Web/CSS/background-color ):

/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00;    /* Fully opaque */
background-color: #bf0;       /* Fully opaque shorthand */
background-color: #11ffee00;  /* Fully transparent */
background-color: #1fe0;      /* Fully transparent shorthand  */
background-color: #11ffeeff;  /* Fully opaque */
background-color: #1fef;      /* Fully opaque shorthand  */

/* RGB value */
background-color: rgb(255, 255, 128);        /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

AMS777
sumber

-2

Anda dapat menggunakan warna RGB dengan opacity seperti kode warna dalam RGB (63, 245, 0) dan menambahkan opacity (seperti 63, 245, 0, 0,5) dan juga mengganti RGB dengan RGBA. Aakan digunakan untuk opacity.

div {
  background: rgba(63, 245, 0, 0.5);
}

Luaskan cuplikan

Vijay Sharma
sumber

Bagaimana cara memberikan latar belakang transparan teks atau gambar menggunakan CSS?

Jawaban:

Tangkapan layar bukti hasil:

Atau: