web-dev-qa-db-fra.com

Comment puis-je utiliser un effet verre / flou CSS pour une superposition?

Je ne parviens pas à appliquer un effet de flou sur une couche de superposition semi-transparente. J'aimerais que tout ce qui se cache derrière le div soit flou, comme ceci:

SFW image

Voici un jsfiddle qui ne fonctionne pas: http://jsfiddle.net/u2y2091z/

Des idées comment faire ce travail? J'aimerais que cela soit aussi simple que possible et qu'il soit multi-navigateur. Voici le CSS que j'utilise:

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background:black;
    background:rgba(0,0,0,0.8);

    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
}
htmlcsscss3blurcss-filters
72
Chad Johnson

Merci pour l'aide à tous! J'ai été en mesure de rassembler des informations provenant de tout le monde ici et de Google ultérieur, et j'ai proposé ce qui suit, qui fonctionne dans Chrome et Firefox: http://jsfiddle.net/u2y2091z/12 / . Je travaille toujours sur ce travail pour IE et Opera.

La clé est de placer le contenu à l'intérieur du div auquel le filtre est appliqué:

<div id="mask">
    <p>Lorem ipsum ...</p>
    <img src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>

Et puis le CSS:

#mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: 0.5;

    filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='svgMask'><feGaussianBlur stdDeviation='10' /></filter></svg>#svgMask");
}

Donc, masque a les filtres appliqués. Notez également l'utilisation de url () pour un filtre avec une balise <svg> pour la valeur - cette idée vient de http://codepen.io/AmeliaBR/pen/xGuBr . Si vous réduisez votre CSS, vous devrez peut-être remplacer les espaces dans le balisage du filtre SVG par "% 20".

Alors maintenant, tout ce qui se trouve à l'intérieur du masque est flou.

42
Chad Johnson

Voici un exemple qui utilise le filtre svg.

L'idée est d'utiliser un élément svg avec height comme le #overlay et d'appliquer le filtre feGaussianblur. Ce filtre est appliqué sur un élément svgimage. Pour lui donner un effet extrudé, vous pouvez utiliser un box-shadow au bas de la superposition.

Prise en charge du navigateur pour les filtres svg .

Démo sur Codepen

body {
  background: #222222;
}
#container {
  position: relative;
  width: 450px;
  margin: 0 auto;
}
img {
  height: 300px;
}
#overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  color: rgba(130, 130, 130, 0.5);
  font-size: 50px;
  text-align: center;
  line-height: 100px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}
<div id="container">
  <img src="http://lorempixel.com/450/300/sports" />
  <div id="overlay">WET</div>
  <svg width="450" height="100" viewBox="0 0 450 100" style="position: absolute; top: 0;">
    <defs>
      <filter id="blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
      </filter>
    </defs>
    <image filter="url(#blur)" xlink:href="http://lorempixel.com/450/300/sports" x="0" y="0" height="300px" width="450px" />
  </svg>
</div>
63
Weafs.py

Si vous recherchez une approche multi-navigateur fiable aujourd'hui , vous n'en trouverez pas une excellente. La meilleure option consiste à créer deux images (ceci peut être automatisé dans certains environnements) et à les disposer de manière à ce que l'une superpose l'autre. J'ai créé un exemple simple ci-dessous:

<figure class="js">
    <img src="http://i.imgur.com/3oenmve.png" />
    <img src="http://i.imgur.com/3oenmve.png?1" class="blur" />
</figure>

figure.js {
    position: relative;
    width: 250px; height: 250px;
}

figure.js .blur {
    top: 0; left: 0;
    position: absolute;
    clip: rect( 0, 250px, 125px, 0 );
}

Bien que efficace, même cette approche n'est pas nécessairement idéale. Cela étant dit, cela donne le résultat souhaité .

enter image description here

9
Sampson

Voici une solution possible.

HTML

<img id="source" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />

<div id="crop">
    <img id="overlay" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>

CSS

#crop {
    overflow: hidden;

    position: absolute;
    left: 100px;
    top: 100px;

    width: 450px;
    height: 150px;
}

#overlay {
    -webkit-filter:blur(4px);
    filter:blur(4px);

    width: 450px;
}

#source {
    height: 300px;
    width: auto;
    position: absolute;
    left: 100px;
    top: 100px;
}

Je sais que le CSS peut être simplifié et vous devriez probablement vous débarrasser des identifiants. L'idée est d'utiliser un div comme conteneur de recadrage, puis d'appliquer un flou sur le duplicata de l'image. violon

Pour que cela fonctionne dans Firefox, vous devez utiliser hack SVG .

8
Juho Vepsäläinen
#bg, #search-bg {
  background-image: url('https://images.pexels.com/photos/719609/pexels-photo-719609.jpeg?w=940&h=650&auto=compress&cs=tinysrgb');
  background-repeat: no-repeat;
  background-size: 1080px auto;
}

#bg {
  background-position: center top;
  padding: 70px 90px 120px 90px;
}

#search-container {
  position: relative;
}

#search-bg {
  /* Absolutely position it, but stretch it to all four corners, then put it just behind #search's z-index */
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 99;

  /* Pull the background 70px higher to the same place as #bg's */
  background-position: center -70px;

  -webkit-filter: blur(10px);
  filter: url('/media/blur.svg#blur');
  filter: blur(10px);
}

#search {
  /* Put this on top of the blurred layer */
  position: relative;
  z-index: 100;
  padding: 20px;
  background: rgb(34,34,34); /* for IE */
  background: rgba(34,34,34,0.75);
}

@media (max-width: 600px ) {
  #bg { padding: 10px; }
  #search-bg { background-position: center -10px; }
}

#search h2, #search h5, #search h5 a { text-align: center; color: #fefefe; font-weight: normal; }
#search h2 { margin-bottom: 50px }
#search h5 { margin-top: 70px }
<div id="bg">
  <div id="search-container">
    <div id="search-bg"></div>
    <div id="search">
      <h2>Awesome</h2>
      <h5><a href="#">How it works »</a></h5>
    </div>
  </div>
</div>
3
prajeesh loremine

Je suis venu avec cette solution.

Cliquez pour voir l'image de l'effet flo

Il s’agit d’une astuce qui utilise un enfant parfaitement positionné div, définit son image d’arrière-plan identique à celle du parent div et utilise ensuite la propriété background-attachment:fixed CSS avec les mêmes propriétés background définies sur l’élément parent.

Ensuite, vous appliquez filter:blur(10px) (ou toute autre valeur) sur la div enfant.

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.background{
    position: relative;
    width:100%;
    height:100vh;
    background-image:url('https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
    background-size:cover;
    background-position: center;
    background-repeat:no-repeat;
}

.blur{
    position: absolute;
    top:0;
    left:0;
    width:50%;
    height:100%;
    background-image:url('https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:cover;
    filter:blur(10px);
    transition:filter .5s ease;
    backface-visibility: hidden;
}

.background:hover .blur{
    filter:blur(0);
}
.text{
    display: inline-block;
    font-family: sans-serif;
    color:white;
    font-weight: 600;
    text-align: center;
    position: relative;
    left:25%;
    top:50%;
    transform:translate(-50%,-50%);
}
<head>
    <title>Blurry Effect</title>
</head>
<body>
    <div class="background">
        <div class="blur"></div>
        <h1 class="text">This is the <br>blurry side</h1>
    </div>
</body>
</html>

vue sur code

1
CptGeo