Saya punya file JPEG yang saya'm menggunakan sebagai gambar latar belakang untuk halaman pencarian, dan I'm menggunakan CSS untuk mengatur itu karena saya'm bekerja dalam Backbone.js konteks:
background-image: url("whatever.jpg");
Saya ingin menerapkan CSS 3 blur filter hanya untuk latar belakang, tapi aku'm tidak yakin bagaimana gaya hanya satu elemen. Jika saya mencoba:
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
hanya di bawah background-image
di CSS saya, itu gaya seluruh halaman, bukan hanya latar belakang. Apakah ada cara untuk memilih hanya gambar dan menerapkan filter untuk itu? Atau, apakah ada cara untuk mengubah blur off untuk setiap elemen pada halaman?
Check out ini pen.
Anda akan memiliki untuk menggunakan dua wadah yang berbeda, satu untuk latar belakang gambar, dan yang lainnya untuk konten anda.
Dalam contoh, saya telah menciptakan dua kontainer, .background-image
dan .konten
.
Keduanya ditempatkan dengan posisi: tetap
dan left: 0; right: 0;
. Perbedaan dalam menampilkan mereka berasal dari z-index
nilai-nilai yang telah ditetapkan berbeda untuk unsur-unsur.
.background-image {
position: fixed;
left: 0;
right: 0;
z-index: 1;
display: block;
background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
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>
Mohon maaf untuk Lorem Ipsum Teks.
Terima kasih untuk Matius Wilcoxson untuk pelaksanaan yang lebih baik menggunakan .isi:sebelum
http://codepen.io/akademy/pen/FlkzB
Menghapuskan kebutuhan untuk elemen tambahan, bersama dengan membuat konten yang sesuai dalam dokumen aliran bukannya tetap/mutlak seperti solusi lain.
Dicapai dengan menggunakan
.content {
overflow: auto;
position: relative;
}
Overflow auto dibutuhkan, lain 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 dalam menghilangkan perbatasan putih di tepi, menggunakan lebar dan tinggi dari 110%dan kiri dan atas
-5%`. Hal ini akan memperbesar latar belakang anak laki-laki - tetapi tidak boleh ada warna solid perdarahan dari tepi.
Diperbarui Pena berikut: https://codepen.io/anon/pen/QgyewB - Terima kasih Chad Fawcett untuk saran.
Seperti yang tercantum dalam jawaban yang lain hal ini dapat dicapai dengan:
latar belakang-filter
Ada yang didukung properti yang disebut latar belakang-filter
, dan saat ini
didukung di Chrome 76, C, Safari, dan iOS Safari (lihat caniuse.com statistik).
Dari Mozilla devdocs:
latar belakang-filter properti yang memberikan efek seperti kabur atau warna pergeseran area belakang sebuah elemen, yang kemudian dapat dilihat melalui elemen tersebut dengan menyesuaikan elemen's transparansi/opacity.
Lihat caniuse.com untuk statistik penggunaan.
Anda akan menggunakannya seperti:
.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>
Update (12/06/2019): Kromium akan kapal dengan latar belakang-filter
diaktifkan secara default di versi 76 yang keluar karena 30/07/2019.
Update (01/06/2019): Yang Mozzilla Firefox tim telah mengumumkan itu akan mulai bekerja pada pelaksanaan ini segera.
Update (21/05/2019): Kromium hanya mengumumkan latar belakang-filter
yang tersedia di chrome canary tanpa mengaktifkan "Aktifkan Eksperimental Web Platform Fitur" bendera. Ini berarti latar belakang-filter
sangat dekat untuk menjadi diimplementasikan pada semua platform chrome.
Anda perlu untuk re-struktur anda HTML dalam rangka untuk melakukan hal ini. Anda harus mengaburkan seluruh elemen dalam rangka untuk blur latar belakang. Jadi jika anda ingin mengaburkan hanya latar belakang, itu telah menjadi unsur sendiri.
Silahkan 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 adalah solusi sederhana untuk browser modern di CSS murni dengan 'sebelum' pseudo elemen, seperti solusi dari Matius Wilcoxson.
Untuk menghindari kebutuhan untuk mengakses pseudo element untuk mengubah gambar dan atribut lainnya dalam JavaScript, hanya menggunakan mewarisi
sebagai nilai dan mengaksesnya 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 */
}
Meskipun semua solusi yang disebutkan adalah sangat pintar, semua tampaknya memiliki masalah kecil atau potensi ketukan di efek dengan unsur-unsur lain pada halaman ketika saya mencoba mereka.
Pada akhirnya untuk menghemat waktu saya hanya pergi kembali ke old solusi: saya menggunakan Paint.NET dan pergi ke Efek Gaussian Blur dengan radius 5 sampai 10 piksel dan hanya disimpan sebagai halaman gambar. :-)
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:
Akhirnya aku mendapatkannya bekerja, tetapi solusi ini tidak berarti mudah! Lihat di sini:
Semua anda benar-benar 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 CSS-solusi, tetapi anda dapat menggunakan CDN Proton dengan filter
:
body {
background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}
Itu adalah dari https://developer.wordpress.com/docs/photon/api/#filter
Sekarang ini menjadi lebih sederhana dan lebih fleksibel dengan menggunakan CSS GRID.Anda hanya harus tumpang tindih blured latar belakang(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;
}
Jawaban ini adalah untuk Material Desain horisontal tata letak kartu dengan dinamis tinggi dan gambar.
Untuk mencegah distorsi gambar karena dinamis tinggi dari kartu, anda bisa menggunakan latar belakang, placeholder gambar dengan blur untuk menyesuaikan perubahan dalam ketinggian.
<div>
dengan kelas wrapper, yang merupakan flexbox.<a>
, kelas link, terletak
relatif.<div>
kelas kabur dan <img>
kelas pic yang merupakan gambar yang jelas.width: 100%
, tapi kelas pic memiliki tinggi tumpukan order, yaitu, z-index: 2
, yang menempatkan di atas placeholder.
.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>
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);
}
Aku't menulis ini, tapi saya melihat ada polyfill untuk sebagian didukung latar belakang-filter
menggunakan CSS SASS compiler, jadi jika anda memiliki kompilasi pipa itu dapat dicapai dengan baik (ini juga menggunakan Ketangkasan):
Jika anda ingin konten yang akan digulir, mengatur posisi konten mutlak:
content {
position: absolute;
...
}
Saya don't tahu jika ini adalah hanya untuk saya, tapi jika tidak itu's perbaiki!
Juga karena latar belakang adalah tetap, itu berarti anda memiliki "paralaks" efek! Jadi sekarang, tidak hanya orang ini mengajarkan anda bagaimana untuk membuat latar belakang buram, tetapi juga latar belakang parallax efek!