Cara menerapkan filter CSS ke gambar latar belakang


467

Saya memiliki file JPEG yang saya gunakan sebagai gambar latar belakang untuk halaman pencarian, dan saya menggunakan CSS untuk mengaturnya karena saya bekerja dalam konteks Backbone.js :

background-image: url("whatever.jpg");

Saya ingin menerapkan filter blur CSS 3 hanya untuk latar belakang, tapi saya tidak yakin bagaimana gaya hanya satu elemen itu. Jika saya mencoba:

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

tepat background-imagedi bawahnya di CSS saya, itu gaya seluruh halaman, bukan hanya latar belakang. Apakah ada cara untuk memilih hanya gambar dan menerapkan filter itu? Atau, apakah ada cara untuk mematikan blur untuk setiap elemen lain di halaman?


2
Mengaburkan hanya sebagian gambar: codepen.io/vsync/pen/gjMEWm
vsync

Jawaban:


528

Lihatlah pena ini .

Anda harus menggunakan dua wadah yang berbeda, satu untuk gambar latar belakang dan yang lainnya untuk konten Anda.

Dalam contoh, saya telah membuat dua wadah, .background-imagedan .content.

Keduanya ditempatkan dengan position: fixeddan left: 0; right: 0;. Perbedaan dalam menampilkannya berasal dari z-indexnilai - nilai yang telah ditetapkan secara berbeda untuk elemen.

.background-image {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  background-image: url('https://i.imgur.com/lL6tQfy.png');
  width: 1200px;
  height: 800px;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.content {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  margin-left: 20px;
  margin-right: 20px;
}
<div class="background-image"></div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend
    rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing,
    quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
  <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum
    tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
</div>

Permintaan maaf untuk Teks Lorem Ipsum .

Memperbarui

Terima kasih kepada Matthew Wilcoxson untuk implementasi yang lebih baik menggunakan .content:before http://codepen.io/akademy/pen/FlkzB


79
Cara yang sedikit lebih baik untuk melakukan ini adalah dengan menggunakan .content: sebelum alih-alih markup "background-image" ekstra. Saya memperbarui pena di sini: codepen.io/akademy/pen/FlkzB
Matthew Wilcoxson

6
Namun, hanya Webkit yang menerapkan fitur ini, dan hanya ada dengan awalan vendor, sehingga awalan ms-, o-, moz- tidak berguna.
Jon z

2
Ini didukung di Firefox 35.0 dan yang lebih baru secara default: caniuse.com/#feat=css-filters
Mikko Rantalainen

1
Baru diperbarui ke FF 35, dan itu bekerja tanpa awalan
Aamir Mahmood

1
@ EdwardBlack Saya tidak berpikir itu masalah tetapi untuk memiliki blur permanen, Anda harus menggunakan alat editing gambar. Cara lain mungkin untuk memiliki semacam pengambilan gambar menggunakan phantomJS / browser webkit tanpa kepala dan kemudian melayani itu, tapi itu cara yang membosankan untuk mencapai hasil yang sama.
Aniket

70

pena

Menghapuskan kebutuhan akan elemen tambahan, bersama dengan membuat konten sesuai dengan alur dokumen daripada diperbaiki / absolut seperti solusi lainnya.

Dicapai menggunakan

.content {
  overflow: auto;
  position: relative;
}

Diperlukan auto overflow, jika tidak latar belakang akan diimbangi oleh beberapa piksel di bagian atas.

Setelah ini, Anda hanya perlu

.content:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background-image: url('img-here');
  background-size:cover;
  width: 100%;
  height: 100%;

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

EDIT Jika Anda tertarik untuk menghilangkan batas putih di tepinya, gunakan lebar dan tinggi 110%dan kiri dan atas -5%. Ini akan memperbesar sedikit latar belakang Anda - tetapi seharusnya tidak ada warna solid yang keluar dari tepinya.

Pena Diperbarui di sini: https://codepen.io/anon/pen/QgyewB - Terima kasih Chad Fawcett untuk sarannya.


1
Keterbatasan dengan ini adalah bahwa Anda tidak dapat memanipulasi elemen semu di js. Jika Anda tidak perlu, maka itu penyelesaian yang baik.
posit labs

6
Jika Anda tidak menyukai batas putih buram, Anda dapat menambah widthdan heightke 110%dan kemudian menambahkan offset -5%ke topdan leftdari content:beforekelas.
Chad Fawcett

1
Ini berfungsi untuk saya, tetapi saya ingin gambar latar belakang itu juga digulir ketika pengguna menggulir halaman. Posisi TETAP menghentikan itu. Bagaimana cara menghilangkan masalah ini?
DEEPAN KUMAR

61

Sebagaimana dinyatakan dalam jawaban lain ini dapat dicapai dengan:

  • Salinan gambar buram sebagai latar belakang.
  • Elemen pseudo yang dapat difilter kemudian diposisikan di belakang konten.

Anda juga bisa menggunakan backdrop-filter

Ada properti yang didukung bernama backdrop-filter, dan saat ini didukung di Chrome 76, Edge , Safari, dan iOS Safari (lihat caniuse.com untuk statistik).

Dari Mozilla devdocs :

Properti backdrop-filter memberikan efek seperti pengaburan atau pemindahan warna area di belakang elemen, yang kemudian dapat dilihat melalui elemen itu dengan menyesuaikan transparansi / opacity elemen.

Lihat caniuse.com untuk statistik penggunaan.

Anda akan menggunakannya seperti ini:

.background-filter::after {
  -webkit-backdrop-filter: blur(5px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */
  backdrop-filter: blur(5px); /* Supported in Chrome 76 */

  content: "";
  display: block;
  position: absolute;
  width: 100%; height: 100%;
}

.background-filter {
  position: relative;
}

.background {
  background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');
  width: 200px;
  height: 200px;
}
<div class="background background-filter"></div>

Pembaruan (12/06/2019) : Chromium akan dikirimkan dengan backdrop-filterdiaktifkan secara default di versi 76 yang akan keluar 30/07/2019 .

Pembaruan (01/06/2019) : Tim Mozzilla Firefox telah mengumumkan akan segera mulai mengimplementasikannya.

Pembaruan (21/05/2019) : Chromium yang baru diumumkan backdrop-filter tersedia di kenari chrome tanpa mengaktifkan bendera "Aktifkan Fitur Platform Web Eksperimental". Ini berarti backdrop-filtersangat dekat untuk diterapkan pada semua platform chrome.


5
Bahkan jika itu tidak bekerja di semua browser, Anda mendapatkan suara saya untuk memberikan cara non-hack yang benar untuk melakukan ini.
MrMesees

AFAIK ini adalah fitur non standar, jadi tidak ada spesifikasi untuk itu.
Vitim.us

3
KEPALA BANG! Pada tahun 2018 dukungan browser turun secara signifikan untuk ini! Tidak didukung di Edge, Firefox, atau Chrome.
protoEvangelion

@protoEvangelion Tampaknya akan tersedia di Edge 16+, dan saya tidak melihat peramban lain yang mengatakan mereka tidak akan mengimplementasikan ini. Adakah fakta yang mendukung klaim ini?
hitautodestruct

@hitautodestruct Menurut caniuse.com IE, Edge 16, Firefox dan Chrome tidak mendukung ini secara default saat ini. Anda benar bahwa Edge 17+ mendukung ini. Terima kasih telah menunjukkannya. Jawaban
kerennya

26

Anda perlu menyusun ulang HTML Anda untuk melakukan ini. Anda harus mengaburkan seluruh elemen untuk mengaburkan latar belakang. Jadi jika Anda ingin mengaburkan hanya latar belakang, itu harus menjadi elemennya sendiri.


6

Silakan periksa kode di bawah ini: -

.backgroundImageCVR{
	position:relative;
	padding:15px;
}
.background-image{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:url('http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg');
	background-size:cover;
	z-index:1;
	-webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);	
}
.content{
	position:relative;
	z-index:2;
	color:#fff;
}
<div class="backgroundImageCVR">
    <div class="background-image"></div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
      <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
    </div>
</div>


5

Berikut ini adalah solusi sederhana untuk peramban modern dalam CSS murni dengan elemen pseudo 'sebelum', seperti solusi dari Matthew Wilcoxson.

Untuk menghindari perlunya mengakses elemen pseudo untuk mengubah gambar dan atribut lain dalam JavaScript, cukup gunakan inheritsebagai nilai dan akses melalui elemen induk (di sini body).

body::before {
    content: ""; /* Important */
    z-index: -1; /* Important */
    position: inherit;
    left: inherit;
    top: inherit;
    width: inherit;
    height: inherit;
    background-image: inherit;
    background-size: cover;
    filter: blur(8px);
}

body {
  background-image: url("xyz.jpg");
  background-size: 0 0;  /* Image should not be drawn here */
  width: 100%;
  height: 100%;
  position: fixed; /* Or absolute for scrollable backgrounds */
}

Itu tidak bekerja untuk saya. Apakah Anda memiliki jsfiddle yang berfungsi?
Mat

2

Pada .contenttab di CSS ubah ke position:absolute. Jika tidak, halaman yang diberikan tidak akan dapat digulir.


1

Meskipun semua solusi yang disebutkan sangat pintar, semua tampaknya memiliki masalah kecil atau potensi mengetuk efek dengan elemen lain di halaman ketika saya mencobanya.

Pada akhirnya untuk menghemat waktu saya hanya kembali ke solusi lama saya: Saya menggunakan Paint.NET dan pergi ke Efek, Gaussian Blur dengan radius 5 hingga 10 piksel dan hanya menyimpannya sebagai gambar halaman. :-)

HTML:

<body class="mainbody">
</body

CSS:

body.mainbody
{
    background: url('../images/myphoto.blurred.png');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
}

EDIT:

Saya akhirnya berhasil, tetapi solusinya tidak mudah! Lihat disini:


Anda mengunduh 2 imgs
Ced

1

Yang Anda butuhkan adalah "filter":

blurWhatEverYouWantInPixels»);"

body {
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
}

#background {
    background-image: url('https://cdn2.geckoandfly.com/wp-content/uploads/2018/03/ios-11-3840x2160-4k-5k-beach-ocean-13655.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    /* START */
    /* START */
    /* START */
    /* START */

    /* You can adjust the blur-radius as you'd like */
    filter: blur(3px);
}
<div id="background"></div>

<p id="randomContent">Lorem Ipsum</p>


1

Tentu saja, ini bukan solusi CSS, tetapi Anda dapat menggunakan CDN Proton dengan filter:

body {
    background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}

Itu dari https://developer.wordpress.com/docs/photon/api/#filter


Adakah cara licin untuk membuat ini berfungsi localhostsaat pengujian?
Jonathan

Jumlah blur untuk gambar res yang besar terlalu halus, bagaimana cara saya meningkatkan jumlah blur secara drastis tanpa terlihat buram? Lebar membantu sedikit, tetapi terlihat terlalu kuning jika saya terlalu banyak mengaburkan
Jonathan

0

Saya tidak menulis ini, tapi saya perhatikan ada polyfill untuk sebagian didukung backdrop-filtermenggunakan kompiler SASS CSS, jadi jika Anda memiliki pipa kompilasi itu dapat dicapai dengan baik (juga menggunakan TypeScript):

https://codepen.io/mixal_bl4/pen/EwPMWo


0

div {
    background: inherit;
    width: 250px;
    height: 350px;
    position: absolute;
    overflow: hidden;  /* Adding overflow hidden */
}

div:before {
    content: ‘’;
    width: 300px;
    height: 400px;
    background: inherit;
    position: absolute;
    left: -25px;  /* Giving minus -25px left position */
    right: 0;
    top: -25px;   /* Giving minus -25px top position */
    bottom: 0;
    box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.3);
    filter: blur(10px);
}


0

Jawaban ini untuk tata letak kartu horisontal Desain Material dengan ketinggian dinamis dan gambar.

Untuk mencegah distorsi gambar karena ketinggian dinamis kartu, Anda dapat menggunakan gambar placeholder latar belakang dengan blur untuk menyesuaikan perubahan ketinggian.

 

Penjelasan

  • Kartu ini terkandung dalam bungkus<div> kelas , yang merupakan kotak centang.
  • Kartu ini terdiri dari dua elemen, gambar yang juga merupakan tautan, dan konten.
  • Link <a>, kelas Link , diposisikan relatif .
  • Link terdiri dari dua sub-elemen, sebuah tempat <div>kelas blur dan <img>kelas pic yang merupakan gambar yang jelas.
  • Keduanya diposisikan absolut dan dimiliki width: 100%, tetapi pic kelas memiliki susunan tumpukan yang lebih tinggi, yaitu z-index: 2, yang menempatkannya di atas placeholder.
  • Gambar latar belakang untuk placeholder kabur diatur melalui gaya inline di HTML.

 

Kode

.wrapper {
  display: flex;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.23);
  background-color: #fff;
  margin: 1rem auto;
  height: auto;
}

.wrapper:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.link {
  display: block;
  width: 200px;
  height: auto;
  overflow: hidden;
  position: relative;
  border-right: 2px solid #ddd;
}

.blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

.pic {
  width: calc(100% - 20px);
  max-width: 100%;
  height: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.pic:hover {
  transition: all 0.2s ease-out;
  transform: scale(1.1);
  text-decoration: none;
  border: none;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding: 20px;
  overflow-x: hidden;
}

.text {
  margin: 0;
}
<div class="wrapper">
  <a href="#" class="link">
    <div class="blur" style="background: url('http://www.planwallpaper.com/static/assets/img/header.jpg') 50% 50% / cover;"></div>
    <img src="http://www.planwallpaper.com/static/assets/img/header.jpg" alt="Title" class="pic" />
  </a>

  <div class="content">
    <p class="text">Agendum dicendo memores du gi ad. Perciperem occasionem ei ac im ac designabam. Ista rom sibi vul apud tam. Notaverim to extendere expendere concilium ab. Aliae cogor tales fas modus parum sap nullo. Voluntate ingressus infirmari ex mentemque ac manifeste
      eo. Ac gnum ei utor sive se. Nec curant contra seriem amisit res gaudet adsunt. </p>
  </div>
</div>


0

Sekarang ini menjadi lebih sederhana dan lebih fleksibel dengan menggunakan CSS GRID. Anda hanya perlu tumpang tindih dengan latar belakang blured (imgbg) dengan teks (h2)

<div class="container">
 <div class="imgbg"></div>
 <h2>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis enim
  aut rerum mollitia quas voluptas delectus facere magni cum unde?:)
 </h2>
</div>

dan css:

.container {
        display: grid;
        width: 30em;
      }

.imgbg {
        background: url(bg3.jpg) no-repeat center;
        background-size: cover;
        grid-column: 1/-1;
        grid-row: 1/-1;
        filter: blur(4px);
      }


     .container h2 {
        text-transform: uppercase;
        grid-column: 1/-1;
        grid-row: 1/-1;
        z-index: 2;
      }

0
$fondo: url(/grid/assets/img/backimage.png);    
{ padding: 0; margin: 0; } 
body { 
    ::before{
        content:"" ; height: 1008px; width: 100%; display: flex; position: absolute; 
        background-image: $fondo ; background-repeat: no-repeat ; background-position: 
        center; background-size: cover; filter: blur(1.6rem);
    }
}

1
Menambahkan penjelasan pada jawaban Anda akan sangat bagus.
Arvind Maurya

Sedikit pun Sass saya meletakkan kode berikutnya, dan saya melukis semua item di tubuh, mungkin bisa meminta bantuan untuk hanya memiliki gambar di latar belakang tubuh ????? $ fondo: url (/grid/assets/img/backimage.png); {padding: 0; margin: 0; } body {:: before {content: ""; tinggi: 1008px; lebar: 100%; display: flex; posisi: absolut; background-image: $ fondo; background-repeat: no-repeat; posisi latar belakang: tengah; ukuran latar belakang: penutup; filter: blur (1.6rem); }}
Carlos Boyzo

0

Tanpa menggunakan pseudo-class dari

body{
    background:#cecece;
    font-family: "Scope One", serif;
    font-size: 12px;
    color:black;
    margin:0 auto;
    height:100%;
    width:100%;
    background-image: 
       linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.81)), 
        url(https://i.imgur.com/2rRMQh7.jpg);
       -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 
}
<body></body>


-6

Jika Anda ingin konten dapat digulir, atur posisi konten ke absolut:

content {
   position: absolute;
   ...
}

Saya tidak tahu apakah ini hanya untuk saya, tetapi jika tidak, perbaiki!

Juga karena latar belakang sudah diperbaiki, itu berarti Anda memiliki efek "paralaks" ! Jadi sekarang, orang ini tidak hanya mengajarkan Anda cara membuat latar belakang buram, tetapi juga efek latar belakang paralaks!


4
tidak menjawab pertanyaan
gorn
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.