264

Saya dapat melihat dalam referensi CSS cara mengatur transparansi gambar dan cara mengatur gambar latar belakang . Tetapi bagaimana saya bisa menggabungkan keduanya untuk menetapkan gambar latar belakang transparan?

Saya memiliki gambar yang ingin saya gunakan sebagai latar belakang, tetapi terlalu terang - saya ingin menurunkan opacity menjadi sekitar 0,2. Bagaimana saya bisa melakukan ini?

#main {
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
}

css AP257
sumber

133

Dua metode:

Konversikan ke PNG dan jadikan opacity gambar asli 0,2
(Metode yang lebih baik) memiliki <div>yang position: absolute;sebelum #maindan sama tingginya #main, kemudian menerapkan gambar latar belakang dan opacity: 0.2; filter: alpha(opacity=20);.

Niet the Dark Absol
sumber

Ya, masalah besar dengan PNG adalah ukurannya. Sepertinya akan sangat besar. Sekarang kita dapat menentukan opacity: ...di semua browser, itu jauh lebih baik!

Alexis Wilke

1

Anda akan terkejut dengan apa yang dapat Anda peras dari PNG. Misalnya, pada 0,2 opacity, Anda mungkin tidak akan memilih banyak detail, sehingga Anda dapat mengkonversi ke Indexed-PNG. Saya benar-benar menggunakan ini di situs web saya sendiri, dan meremas gambar latar 1920x1080 menjadi hanya di bawah 250kb.

Niet the Dark Absol

Anda lebih baik menambahkan indeks-z: -1 ke posisi itu: absolut, agar dapat menggunakan dasar di atas hamparan. Jawaban yang bagus.

Raz

1

Anda juga dapat menggunakan WebP - mendukung transparansi dan ukuran file jauh lebih kecil dari PNG. Semua browser utama kecuali Safari sekarang mendukung WebP. Anda dapat melayani WebP untuk mendukung browser dan PNG ke Safari.

Dan Roberts

364

#main {
    position: relative;
}
#main:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}

Dan Eastwell
sumber

4

Konten yang dihasilkan dari IE8 ke atas. caniuse.com/#feat=css-gencontent , gunakan properti filter untuk IE8. caniuse.com/#search=opacity

Dan Eastwell

3

Saya menambahkan "z-index: -1" ke CSS. Dengan begitu gambar latar belakang dipengaruhi oleh opacity, bukan sisa dari isi #main

patrick

17

Saya menggunakan :beforebukan :afterdan kemudian saya tidak perlu mengutak-atik z-indexkarena :beforeberakhir di bawah konten utama secara otomatis. (Saat ini diuji di Chrome dan FF.)

KajMagnus

1

@ KajMagnus Jika Anda melakukan itu, maka semuanya setelah itu tidak ditampilkan. Cobalah memiliki opacity 1,0, dan Anda akan melihat apa yang saya maksud.

Jessica

1

Jika Anda mendapatkan gambar latar belakang berulang, Anda mungkin ingin / perlu menambahkan background-repeat: no-repeat; background-attachment: fixed; background-position: center;dalam #main: after {...} .

larangan geoengineering

106

Solusi dengan 1 div dan TANPA gambar transparan:

Anda dapat menggunakan fitur multibackground CSS3 dan meletakkan dua latar belakang: satu dengan gambar, yang lain dengan panel transparan di atasnya (karena saya pikir tidak ada cara untuk mengatur langsung opacity dari gambar latar belakang):

background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(bg.png) repeat 0 0, url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.7))), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

Anda tidak dapat menggunakan rgba(255,255,255,0.5)karena itu sendiri hanya diterima di bagian belakang, jadi Anda saya telah menggunakan gradien yang dihasilkan untuk setiap browser untuk contoh ini (itu sebabnya sangat lama). Tetapi konsepnya adalah sebagai berikut:

background: tranparentColor, url("myImage");

http://jsfiddle.net/pBVsD/1/

Kayu
sumber

Ini hanya akan berfungsi jika latar belakangnya adalah warna solid, jika Anda memiliki PNG24 yang merupakan latar belakang dan Anda ingin opacity (pada hover misalnya) maka ini tidak akan berfungsi, dan Anda harus menggunakan metode pseudo-element , yang sebenarnya lebih baik karena dapat digunakan di IE 8 dan lebih tinggi.

vsync

66

Solusi sederhana

jika Anda perlu mengatur gradien hanya untuk gambar latar :

background-image: url(IMAGE_URL); /* fallback for older browsers */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url(IMAGE_URL);

Francesco Borzi
sumber

Gambar bergerak sedikit ke atas. Apakah ada yang diperbaiki?

HFR1994

6

Anda juga dapat menggunakan RGBA 255.255.255 background-image: linear-gradient (ke bawah, rgba (255.255.255.0,6) 0%, rgba (255.255.255.0,6) 100%), url (IMAGE_URL);

Roman

@Roman Anda dapat mengatur komponen warna rgba ke nilai yang digunakan sebagai warna-latar belakang dalam elemen atau induk penanamnya (diuji pada Chrome 58.0.3029.81, Edge 38.14393.0.0).

collapsar

46

Saya melihat ini dan di CSS3 Anda sekarang dapat menempatkan kode seperti ini. Katakanlah saya ingin menutupi seluruh latar belakang saya akan melakukan sesuatu seperti ini. Kemudian dengan hsla(0,0%,100%,0.70)atau rgba Anda menggunakan latar belakang putih dengan persentase saturasi atau opacity berapa pun untuk mendapatkan tampilan yang Anda inginkan.

.body{
    background-attachment: fixed;
    background-image: url(../images/Store1.jpeg);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: hsla(0,0%,100%,0.70);
    background-blend-mode: overlay;
    background-repeat: no-repeat;
}

heli nathaniel
sumber

2

Menambahkan warna latar belakang dan mode campuran-latar melakukan trik untuk saya. Sekarang saya punya div dengan opacity yang tidak mempengaruhi anak-anaknya!

Diego Victor de Jesus

1

ini bagus! Saya membuat fungsi jquery untuk mengubah opacity pada gulir, menciptakan warna di atas gambar latar belakang saat Anda menggulir ke bawah. $ (function () {$ (window) .scroll (function () {var scroll = $ (window) .scrollTop (); var current = 0; var now = (gulir saat ini) / 7; $ ('. slide ') .css (' posisi latar belakang ', '50%' + sekarang + 'px'); var color = Math.round (scroll / 7) / 100; $ ('. slide'). css ('background- warna ',' rgba (128, 45, 87, '+ color +') ');});});

drooh

10

Anda dapat menggunakan CSS psuedo selector :: after untuk mencapai ini. Ini demo yang berfungsi.

.bg-container{
  width: 100%;
  height: 300px;
  border: 1px solid #000;
  position: relative;
}
.bg-container .content{
  position: absolute;
  z-index:999;
  text-align: center;
  width: 100%;
}
.bg-container::after{
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index:-99;
  background-image: url(https://i.stack.imgur.com/Hp53k.jpg);
  background-size: cover;
  opacity: 0.4;
}

<div class="bg-container">
   <div class="content">
     <h1>Background Opacity 0.4</h1>
   </div>
</div>

Luaskan cuplikan

Hari Das
sumber

4

Saya punya masalah serupa. Saya memiliki gambar dan ingin mengurangi transparansi dan memiliki latar belakang hitam di belakang gambar. Alih-alih mengurangi opacity atau membuat latar belakang hitam atau div sekunder saya mengatur linear-gradien ke gambar semua dalam satu baris:

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%), url("/img/picture.png");

Luaskan cuplikan

matteo_dm
sumber

3

Saya telah menggunakan jawaban dari @Dan Eastwell dan bekerja dengan sangat baik. Kode ini mirip dengan kodenya tetapi dengan beberapa tambahan.

.granddata {
    position: relative;
    margin-left :0.5%;
    margin-right :0.5%;
}
.granddata:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("/Images/blabla.jpg");
    width: 100%;
    height: 100%;
    opacity: 0.2;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment:fixed;
}

El camerounian
sumber

2

Cara terbaik untuk melakukannya untuk gambar sederhana adalah dengan hanya menggunakan CSS untuk mengatur latar belakang elemen HTML seperti itu.

HTML {
    background: url('http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg');
    width: 100%;
    height: 100%;
}

Luaskan cuplikan

Jika Anda ingin menjadi mewah , dan mengatur opacity-nya, maka, di IE9 + *, Anda dapat mengatur warna latar belakang tubuh yang transparan. Ini berfungsi dengan overlay putih semitransparan untuk membuat gambar lebih putih, dan tampak lebih cerah. Misalnya, putih dengan opacity 75% ( rgba(255,255,255,.75)) akan menghasilkan efek berikut.

HTML {
  background: url('http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg');
  width: 100%;
  height: 100%;
  position: relative;
}

body {
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  background: rgba(255, 255, 255, .75);
}

<p>Lorem ipsum dolor sit amet, et id, maecenas a convallis, elit facilisi congue augue id ac. Suscipit luctus egestas rutrum, amet tincidunt porttitor ante convallis magna, vivamus amet at turpis, ante lacinia blandit vel metus mauris rutrum. Ipsum nam adipiscing.
  Est sapien quis sem vestibulum, quis cubilia turpis, suspendisse mattis vehicula enim risus pede, placerat suspendisse dui. Convallis nostrud pede, mollit lobortis, ornare ipsum tempor faucibus tortor, vel pede, porttitor nulla nonummy vestibulum purus.
  Eros placerat tenetur augue ipsum aliquam, pellentesque congue condimentum sed vitae lectus.</p>
<p>Aliquam venenatis curabitur pellentesque sociosqu quam. Tincidunt id erat vestibulum in, est fermentum ipsum et augue, nascetur etiam. Lorem elit, sed donec, leo vivamus ac id enim faucibus vel. Nullam sit feugiat sed massa consectetuer auctor, nulla
  et erat lacinia nec, eget ut ante nullam est non in, elit porttitor in in donec eget porttitor. Interdum ultricies sem morbi facilisis nibh erat. Id suspendisse, sed tincidunt fringilla sit, sapien odio vel, at culpa augue sed taciti neque inceptos,
  massa class non. Vel tristique condimentum at pellentesque, commodo nulla sagittis rhoncus lorem. Viverra maecenas tellus pretium urna mauris proin, vel libero morbi, ante volutpat vestibulum augue. Itaque leo mauris turpis, vivamus nisl congue nisl
  nulla in turpis, eget vitae accumsan dolor ipsum leo venenatis, feugiat vehicula in risus, donec eu pede vivamus itaque nam. Justo amet vitae pellentesque sed, posuere fusce sapien, sed nam placerat libero sed etiam curabitur, suspendisse justo, amet
  porttitor.</p>
<p>Condimentum eget. Sem elementum a et mauris sem a, velit justo consectetuer in turpis mauris, sit sed elit cum, fusce suspendisse pretium dictum, mattis dui tortor tellus. Volutpat ut ante lorem nec laoreet aliquam, lorem est magna amet, integer mauris
  purus tellus. Porta enim repellendus aliquam eros. Turpis posuere elementum suscipit wisi lobortis, nec nunc consequat dictum ut unde at, mi lorem amet nunc. Cubilia pede, integer dolor, eget platea felis elit enim rhoncus, integer proin quam in ipsum
  lorem, diam curabitur netus pretium pellentesque. Donec rutrum ultrices placerat, curabitur maecenas, feugiat pede varius accumsan quam lorem, dui et dictumst asperiores nulla, vivamus urna nam leo libero. Posuere non convallis amet justo parturient,
  imperdiet consectetuer arcu praesent cursus risus, quis pretium dolor.</p>

Luaskan cuplikan

Kiat: perhatikan bagaimana HTML itu position: relative, sementara tubuhnya position: absolute. Ini untuk mencegah warna latar belakang tubuh berperilaku lebih seperti penyorot teks dalam tubuh.

Ini bahkan dapat diperluas ke sesuatu yang sebanding dengan, tetapi masih sangat berbeda dari, filter CSS dengan mengubah latar belakang warna RGBA tubuh. Misalnya, rgba(0,255,0,.75)akan membuat warna yang sangat hijau seperti yang Anda lihat di cuplikan kode.

HTML {
    background: url('http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg');
    width: 100%;
    height: 100%;
    position: relative;
}
body {
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    background: rgba(0,255,0,.75);
}

<p>Aliquam venenatis curabitur pellentesque sociosqu quam. Tincidunt id erat vestibulum in, est fermentum ipsum et augue, nascetur etiam. Lorem elit, sed donec, leo vivamus ac id enim faucibus vel. Nullam sit feugiat sed massa consectetuer auctor, nulla et erat lacinia nec, eget ut ante nullam est non in, elit porttitor in in donec eget porttitor. Interdum ultricies sem morbi facilisis nibh erat. Id suspendisse, sed tincidunt fringilla sit, sapien odio vel, at culpa augue sed taciti neque inceptos, massa class non. Vel tristique condimentum at pellentesque, commodo nulla sagittis rhoncus lorem. Viverra maecenas tellus pretium urna mauris proin, vel libero morbi, ante volutpat vestibulum augue. Itaque leo mauris turpis, vivamus nisl congue nisl nulla in turpis, eget vitae accumsan dolor ipsum leo venenatis, feugiat vehicula in risus, donec eu pede vivamus itaque nam. Justo amet vitae pellentesque sed, posuere fusce sapien, sed nam placerat libero sed etiam curabitur, suspendisse justo, amet porttitor.</p>
<p>Condimentum eget. Sem elementum a et mauris sem a, velit justo consectetuer in turpis mauris, sit sed elit cum, fusce suspendisse pretium dictum, mattis dui tortor tellus. Volutpat ut ante lorem nec laoreet aliquam, lorem est magna amet, integer mauris purus tellus. Porta enim repellendus aliquam eros. Turpis posuere elementum suscipit wisi lobortis, nec nunc consequat dictum ut unde at, mi lorem amet nunc. Cubilia pede, integer dolor, eget platea felis elit enim rhoncus, integer proin quam in ipsum lorem, diam curabitur netus pretium pellentesque. Donec rutrum ultrices placerat, curabitur maecenas, feugiat pede varius accumsan quam lorem, dui et dictumst asperiores nulla, vivamus urna nam leo libero. Posuere non convallis amet justo parturient, imperdiet consectetuer arcu praesent cursus risus, quis pretium dolor.</p>
<p>Lorem ipsum dolor sit amet, et id, maecenas a convallis, elit facilisi congue augue id ac. Suscipit luctus egestas rutrum, amet tincidunt porttitor ante convallis magna, vivamus amet at turpis, ante lacinia blandit vel metus mauris rutrum. Ipsum nam adipiscing. Est sapien quis sem vestibulum, quis cubilia turpis, suspendisse mattis vehicula enim risus pede, placerat suspendisse dui. Convallis nostrud pede, mollit lobortis, ornare ipsum tempor faucibus tortor, vel pede, porttitor nulla nonummy vestibulum purus. Eros placerat tenetur augue ipsum aliquam, pellentesque congue condimentum sed vitae lectus.</p>

Luaskan cuplikan

Tip: RGBA bersesuaian dengan R ed G reen B lue A lpha. Jadi, browser mengartikan rgba(0,255,0,.75)sebagai sesuatu yang dicontohkan oleh {red:0, green:255, blue:0, alpha:'75%'}.

* Tabel kompatibilitas penuh dapat ditemukan di Can I Use. Namun, harap perhatikan juga bahwa Anda perlu mengklik "Tampilkan Semua" untuk melihat bahwa IE9 mendukungnya.

Tambahan

Karena saya telah menjawab pertanyaan tetapi saya memiliki lebih banyak yang ingin saya tambahkan, saya memberi judul addendum bagian ini dan menambahkan beberapa informasi yang berpotensi membantu. Jadi, untuk memperkirakan lebih jauh pada konten di atas, Anda dapat menggunakan SVG sebagai gambar latar belakang untuk melakukan hal-hal luar biasa yang jahat. Misalnya, Anda dapat membuat latar belakang layar pemuatan yang menampilkan ikon situs web keren seperti yang Anda lihat dalam contoh SVG yang disandikan base64 di bawah ini.

HTML {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiIgYXJpYS1oaWRkZW49InRydWUiPjxnIGlkPSJrIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImMiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoLTEyMCkiIHRyYW5zZm9ybS1vcmlnaW49Ii41LjUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYmEoMCwwLDAsLjYpIi8+PHN0b3Agb2Zmc2V0PSI0NyUiIHN0b3AtY29sb3I9InJnYmEoMCwwLDAsLjYpIi8+PHN0b3Agb2Zmc2V0PSI1MyUiIHN0b3AtY29sb3I9InJnYmEoMCwwLDAsLjMpIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2JhKDAsMCwwLC45KSIvPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9ImdyYWRpZW50VHJhbnNmb3JtIiBhdHRyaWJ1dGVUeXBlPSJYTUwiIHR5cGU9InJvdGF0ZSIgZHVyPSI3MDAwbXMiIGZyb209IjAiIHRvPSIzNjAiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9saW5lYXJHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImQiIHI9Ii41IiBjeT0iLjUiIGN4PSIuNSI+PHN0b3Agb2Zmc2V0PSIzNSUiIHN0b3AtY29sb3I9ImJsYWNrIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9ImdyZXkiLz48c3RvcCBvZmZzZXQ9IjY1JSIgc3RvcC1jb2xvcj0iYmxhY2siLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iZSIgcj0iLjUiIGN5PSIuNSIgY3g9Ii41Ij48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSJ5ZWxsb3ciLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0ieWVsbG93Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPjwvcmFkaWFsR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJmIj48cGF0aCBzdHJva2U9ImdyZXkiIHN0cm9rZS13aWR0aD0iLjAxIiBpZD0iYiIgZD0iTS43NS43MUEuMzEuMzEgMCAxIDEgLjc1LjMxTC42OS4zOEEuMjIuMjIgMCAxIDAgLjY4LjY2TC41Ni41N0wuNi41MUwuODIuNjh6TS42LjYzQS4xNC4xNCAwIDEgMSAuNjIuNDJMLjY2LjM5QS4xOS4xOSAwIDEgMCAuNjQuNjZ6TS41NS41OEEuMDcuMDcgMCAxIDEgLjU2LjQ2TC42LjQzQS4xMi4xMiAwIDEgMCAuNTkuNjF6Ii8+PC9jbGlwUGF0aD48Y2xpcFBhdGggaWQ9ImciPjxwYXRoIHN0cm9rZT0iZ3JleSIgZmlsbD0icmVkIiBzdHJva2Utd2lkdGg9Ii4wMSIgZD0iTS42LjYzQS4xNC4xNCAwIDEgMSAuNjIuNDJMLjY2LjM5QS4xOS4xOSAwIDEgMCAuNjQuNjZ6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2YpIiBmaWxsPSJ1cmwoI2MpIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0icmVkIiBjbGlwLXBhdGg9InVybCgjZykiLz48L2c+PGcgdHJhbnNmb3JtPSJzY2FsZSgxLjEpIiB0cmFuc2Zvcm0tb3JpZ2luPSIuNS41Ij48dGV4dD48dGV4dFBhdGggaHJlZj0iI2IiIGZvbnQtc2l6ZT0iLjY1JSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgbGV0dGVyLXNwYWNpbmc9Ii0uNSUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTpwcmUiPiBZT1VSIDx0c3BhbiBmaWxsPSJyZWQiPkVYQU1QTEUgV0VCU0lURTwvdHNwYW4+IExPR088L3RleHRQYXRoPjwvdGV4dD48L2c+PC9nPjwvc3ZnPg==');
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
}
body {
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    background: rgba(255,255,255,.5);
}

<p>Condimentum eget. Sem elementum a et mauris sem a, velit justo consectetuer in turpis mauris, sit sed elit cum, fusce suspendisse pretium dictum, mattis dui tortor tellus. Volutpat ut ante lorem nec laoreet aliquam, lorem est magna amet, integer mauris purus tellus. Porta enim repellendus aliquam eros. Turpis posuere elementum suscipit wisi lobortis, nec nunc consequat dictum ut unde at, mi lorem amet nunc. Cubilia pede, integer dolor, eget platea felis elit enim rhoncus, integer proin quam in ipsum lorem, diam curabitur netus pretium pellentesque. Donec rutrum ultrices placerat, curabitur maecenas, feugiat pede varius accumsan quam lorem, dui et dictumst asperiores nulla, vivamus urna nam leo libero. Posuere non convallis amet justo parturient, imperdiet consectetuer arcu praesent cursus risus, quis pretium dolor.</p>
<p>Lorem ipsum dolor sit amet, et id, maecenas a convallis, elit facilisi congue augue id ac. Suscipit luctus egestas rutrum, amet tincidunt porttitor ante convallis magna, vivamus amet at turpis, ante lacinia blandit vel metus mauris rutrum. Ipsum nam adipiscing. Est sapien quis sem vestibulum, quis cubilia turpis, suspendisse mattis vehicula enim risus pede, placerat suspendisse dui. Convallis nostrud pede, mollit lobortis, ornare ipsum tempor faucibus tortor, vel pede, porttitor nulla nonummy vestibulum purus. Eros placerat tenetur augue ipsum aliquam, pellentesque congue condimentum sed vitae lectus.</p>
<p>Aliquam venenatis curabitur pellentesque sociosqu quam. Tincidunt id erat vestibulum in, est fermentum ipsum et augue, nascetur etiam. Lorem elit, sed donec, leo vivamus ac id enim faucibus vel. Nullam sit feugiat sed massa consectetuer auctor, nulla et erat lacinia nec, eget ut ante nullam est non in, elit porttitor in in donec eget porttitor. Interdum ultricies sem morbi facilisis nibh erat. Id suspendisse, sed tincidunt fringilla sit, sapien odio vel, at culpa augue sed taciti neque inceptos, massa class non. Vel tristique condimentum at pellentesque, commodo nulla sagittis rhoncus lorem. Viverra maecenas tellus pretium urna mauris proin, vel libero morbi, ante volutpat vestibulum augue. Itaque leo mauris turpis, vivamus nisl congue nisl nulla in turpis, eget vitae accumsan dolor ipsum leo venenatis, feugiat vehicula in risus, donec eu pede vivamus itaque nam. Justo amet vitae pellentesque sed, posuere fusce sapien, sed nam placerat libero sed etiam curabitur, suspendisse justo, amet porttitor.</p>

Luaskan cuplikan

Tip: The background-size: coverCSS menyebabkan logo SVG di latar belakang diubah ukurannya dengan ukuran elemen HTML.

3.1415926535897932384626433833
sumber

1

Di CSS Anda tambahkan ...

 filter: opacity(50%);

Dalam penggunaan JavaScript ...

 element.style.filter='opacity(50%)';

NB: Tambahkan awalan vendor seperti yang diperlukan tetapi Chromium akan baik-baik saja tanpa.

Coder42
sumber

0

Yah satu-satunya cara CSS untuk melakukan hanya transparansi latar belakang adalah melalui RGBatetapi karena Anda ingin menggunakan gambar saya sarankan menggunakan Photoshop atau Gimp untuk membuat gambar transparan dan kemudian menggunakannya sebagai latar belakang.

sumber

Ini tidak benar, ada deklarasi CSS3 opactiy: 1;:, bukan hanya RGBa.

Kyle

4

Apa yang dia katakan adalah mengatur background-imagegaya pada wadah dan kemudian mengatur opacitygaya pada elemen yang sama. Itu juga akan membuat teks dan konten lain dari elemen itu transparan. Coba ini jika Anda tidak percaya kepada saya: w3schools.com/Css/tryit.asp?filename=trycss_transparency

0

Saya baru saja menambahkan posisi = absolut, atas = 0, lebar = 100% di # utama dan mengatur nilai opacity ke #background

#main{height:100%;position:absolute; top:0;width:100%}
#background{//same height as main;background-image:url(image URL);opacity:0.2}

Saya menerapkan latar belakang ke div sebelum utama.

malas
sumber

-1

Saya menemukan posting ini karena saya memiliki masalah yang sama maka saya pikir mengapa mengacaukan dengan css, menyesuaikan nilai dan menekan refresh ketika Anda dapat dengan mudah menyesuaikan opacity di Photoshop? Salin gambar, rekatkan sebagai layer baru lalu gerakkan bilah geser opacity.

MBM
sumber

2

ArtB sudah benar dengan wesel terakhir. Ini adalah solusi yang sangat baik untuk masalah lain. Ada kalanya ini bukan solusi yang tepat dan ini salah satunya.

jon

-1

Saya memiliki masalah serupa dan saya hanya mengambil gambar latar belakang dengan photoshop dan membuat .png baru dengan opacity yang saya butuhkan. Masalah terpecahkan tanpa khawatir tentang apakah CSS saya berfungsi di semua perangkat & browser

Aebares
sumber

Bisakah saya mengatur gambar latar belakang dan opacity di properti yang sama?

Jawaban:

Solusi sederhana

Tambahan