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?

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

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.

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.

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.

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>

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 */
}

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

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:

• filter: blur (1px); tidak berfungsi di firefox, IE, dan opera

Yang Anda butuhkan adalah "filter":

blur(«WhatEverYouWantInPixels»);"

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>

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

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

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>

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;
      }

$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);
    }
}

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>

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!