Cum de a aplica o CSS filtru pentru o imagine de fundal

Am un fișier JPEG că m-am'm, folosind ca imagine de fundal pentru o pagină de căutare, și am'm folosind CSS să-l setați pentru că m-am'm de lucru în termen de Backbone.js contexte:

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

Vreau să se aplice un CSS 3 filtru blur doar la fundal, dar am'm nu sunt sigur cum să stil doar un singur element. Dacă am încerca:

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

doar sub `background-image în CSS, stiluri întreaga pagină, mai degrabă decât doar de fundal. Există o modalitate de a selecta doar imaginea și se aplică filtrul pentru asta? Alternativ, există o modalitate de a transforma doar blur off pentru fiecare element de pe pagina?

Temani Afif
Întrebarea editată 26 iulie 2019 в 7:21
Programare
css css-filters background-image
18 noiembrie 2013 в 3:49
10 vizualizări
Comentarii la întrebare (1)
Soluția

Check out acest pen.

Va trebui să utilizați două recipiente diferite, una pentru imaginea de fundal și celălalt pentru dvs. de conținut.

În exemplu, am creat două containere, .background-image "și".conținut.

Ambele dintre ele sunt plasate cu position: fixed " și " stânga: 0; dreapta: 0;. Diferența în afișarea lor vine de laz-index valorile care au fost stabilite în mod diferit pentru elementele.

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

Ne cerem scuze pentru Lorem Ipsum Text.

Update

Datorită Matei Wilcoxson pentru o mai bună punere în aplicare folosind .conținut:înainte de http://codepen.io/akademy/pen/FlkzB

ths
Răspuns editat 27 iulie 2019 в 4:09
Comentarii (17)

pen

Eliminând necesitatea pentru un element suplimentar, împreună cu face conținutul se potrivi în fluxul de documente, mai degrabă decât să fie fixe/absolută ca și alte soluții.

Realizat folosind

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

Preaplin auto este nevoie de altceva fundal va fi compensată de câțiva pixeli în partea de sus.

După aceasta, aveți pur și simplu nevoie

.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 Dacă sunteți interesat în eliminarea margini albe la margini, utilizați o lățime și o înălțime de 110% și la stânga și de sus de -5%. Acest lucru va mări medii un pic - dar nu ar trebui să fie solid de culoare sângerare din margini.

Actualizat Stilou aici: https://codepen.io/anon/pen/QgyewB - Mulțumesc Chad Fawcett pentru sugestie.

Comentarii (3)

După cum se menționează în alte răspunsuri, acest lucru poate fi realizat cu:

  • O copie a estompat imaginea ca imagine de fundal.
  • Un alt element care poate fi filtrat apoi poziționat în spatele conținutului.

Puteți utiliza, de asemenea, fundalul-filtru

Există o susținută proprietate numita fundalul-filtru, și este în prezent sprijinit în Chrome 76, C, Safari, și iOS Safari (a se vedea caniuse.com pentru statistică).

De Mozilla devdocs:

fundalul-filtru proprietatea oferă pentru efecte, cum ar fi estomparea sau își schimbă culoarea în zona din spatele unui element, care pot fi apoi văzute prin acel element prin ajustarea elementului's transparență/opacitate.

A se vedea caniuse.com pentru statistici de utilizare.

V-ar folosi astfel:

.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): Crom va livra cu fondul-filtru` activată în mod implicit în versiunea 76 care se datorează 30/07/2019.

Update (01/06/2019): Pe Mozzilla Firefox echipa a anuntat acesta va începe să lucreze la punerea în aplicare acest lucru în curând.

Update (21/05/2019): Crom tocmai a anuntat `fundalul-filtru este disponibil în google chrome canary, fără a permite "Permite Experimentale Platforma Web Caracteristici" pavilion. Asta înseamnă, fundal-filtrul este foarte aproape de a fi implementat pe toate platforme chrome.

hitautodestruct
Răspuns editat 1 august 2019 в 8:17
Comentarii (6)

Ai nevoie de a re-structura HTML, în scopul de a face acest lucru. Aveți pentru a estompa întregul element în scopul de a estompa fundalul. Deci, dacă doriți pentru a estompa doar fundal, acesta trebuie să fie propriul său element.

Comentarii (0)

Vă rugăm să verificați codul de mai jos:-

.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>
Comentarii (0)

Următoarele este o soluție simplă pentru browserele moderne în CSS pur, cu o 'înainte' pseudo element, ca soluția la Matei Wilcoxson.

Pentru a evita necesitatea de a accesa pseudo-element pentru a schimba imaginea și alte atribute în JavaScript, pur și simplu utilizați moșteni ca valoare și să le accesați prin intermediul elementul părinte (aici "corp").

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 */
}
Comentarii (1)

În .conținut în fila CSS schimba-l laposition:absolute`. În caz contrar, pagina prestate câștigat't fi derulant.

Comentarii (0)

Deși toate soluțiile menționate sunt foarte inteligent, toate păreau să aibă probleme sau potențiale, efectele cu alte elemente de pe pagina, atunci când le-am încercat.

În final, pentru a economisi timp eu pur și simplu am întors la vechiul meu soluție: am folosit [Paint.NET][1] și s-a dus la Efecte, Blur Gaussian, cu o rază de 5 până la 10 pixeli și salvat ca pagină de imagine. :-)

HTML:

Comentarii (1)

Toate ai de fapt nevoie este "filtru":

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>
Comentarii (0)

Desigur, acest lucru nu este un CSS-soluție, dar puteți folosi CDN Proton cu "filtru":

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

Este de la https://developer.wordpress.com/docs/photon/api/#filter

Comentarii (2)

Acum, aceasta a devenit mai simplu și mai flexibil prin utilizarea CSS GRID.Trebuie doar să se suprapună blured fundal(imgbg) cu textul(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>

și 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;
      }
Eljeddi Oussema
Răspuns editat 20 aprilie 2019 в 6:45
Comentarii (0)

Acest raspuns este pentru un Material Design orizontală aspect de carte cu înălțimea dinamică și o imagine.

Pentru a preveni denaturarea imaginii datorită dinamic înălțime de card, ai putea folosi un fundal, imagine substituent cu blur pentru a ajusta pentru schimbări în înălțime.

 

Explicație

  • Cardul este conținută într-un `
    cu clasa ambalaj, care este o flexbox.
  • Cardul este alcătuit din două elemente, o imagine care este, de asemenea, un link-ul, și de conținut.
  • Link-ul de <a>, clasa link, este situat relative.
  • Link-ul este format din două sub-elemente, un substituent <div> clasa blur și <img> clasa foto care este imaginea clară.
  • Ambele sunt poziționate absolute și width: 100%, dar clasa **foto** are o mai mare stivă în ordine, de exemplu,z-index: 2`, ceea ce o plasează deasupra substituent.
  • Imaginea de fundal pentru neclară substituent este stabilit prin stil inline în HTML.

 

Cod

.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>
    ![Title](http://www.planwallpaper.com/static/assets/img/header.jpg)
  </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>
Peter Mortensen
Răspuns editat 7 martie 2019 в 2:13
Comentarii (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);
}
Peter Mortensen
Răspuns editat 7 martie 2019 в 2:09
Comentarii (0)

Am't scrie acest lucru, dar am observat un polyfill pentru suportate parțial fundalul-filtru folosind CSS, SASS compilator, deci, dacă aveți o compilație de conducte poate fi realizat foarte bine (se folosește, de asemenea, mașina de Scris):

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

Comentarii (0)

Dacă vrei să-conținut să fie verticală, setați poziția de conținutul absolute:

content {
   position: absolute;
   ...
}

Eu nu't știu dacă acest lucru a fost doar pentru mine, dar, dacă nu's fix!

De asemenea din fundal este fix, înseamnă că ai o "de paralaxă" efect! Deci, acum, nu numai că această persoană învăța cum să facă un fond neclare, dar este, de asemenea, un parallax efect de fundal!

Peter Mortensen
Răspuns editat 7 martie 2019 в 2:14
Comentarii (1)