web-dev-qa-db-fra.com

Flouter les bords d'une image ou d'une image d'arrière-plan avec CSS

Je sais qu'il existe un tas de nouveaux filtres CSS et je me demande s'il existe un moyen de les appliquer à une image ou une image d'arrière-plan. Tout ce que j'ai lu parle de l'adoucissement de l'image avec une ombre portée, cependant, une ombre portée est une couleur, et je veux brouiller les bords des images afin de pouvoir les mélanger plus facilement si elles étaient côte à côte. À l'heure actuelle, il semble que vous ne pouvez utiliser qu'une ombre portée ou appliquer un flou à l'image entière (en fonction de ce que j'ai lu).

Le plus proche que je peux trouver est une ombre semi-transparente ... comme ça

-webkit-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
htmlcsscss3filter
23
Startec

Si ce que vous recherchez est simplement de flouter les bords de l'image, vous pouvez simplement utiliser l'ombre de boîte avec un encart.

Exemple de travail: http://jsfiddle.net/d9Q5H/1/

Screenshot

HTML: 

<div class="image-blurred-Edge"></div>

[~ # ~] css [~ # ~] 

.image-blurred-Edge {
    background-image: url('http://lorempixel.com/200/200/city/9');
    width: 200px;
    height: 200px;
    /* you need to match the shadow color to your background or image border for the desired effect*/
    box-shadow: 0 0 8px 8px white inset;
}
80
Leonardo

Je ne suis pas tout à fait sûr du résultat visuel final que vous recherchez, mais voici un moyen simple de flouter le bord d'une image: placez un div avec l'image à l'intérieur d'un autre div avec l'image floue.

Exemple de travail ici: http://jsfiddle.net/ZY5hn/1/

Screenshot

HTML:

<div class="placeholder">
     <!-- blurred background image for blurred Edge -->
     <div class="bg-image-blur"></div>
     <!-- same image, no blur -->
     <div class="bg-image"></div>
     <!-- content -->
     <div class="content">Blurred Image Edges</div>
</div>

CSS:

.placeholder {
    margin-right: auto;
    margin-left:auto;
    margin-top: 20px;
    width: 200px;
    height: 200px;
    position: relative;
    /* this is the only relevant part for the example */
}
/* both DIVs have the same image */
 .bg-image-blur, .bg-image {
    background-image: url('http://lorempixel.com/200/200/city/9');
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height:100%;
}
/* blur the background, to make blurred edges that overflow the unblurred image that is on top */
 .bg-image-blur {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
}
/* I added this DIV in case you need to place content inside */
 .content {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    color: #fff;
    text-shadow: 0 0 3px #000;
    text-align: center;
    font-size: 30px;
}

Notez que l'effet flou utilise l'image, il change donc avec la couleur de l'image.

J'espère que ça aide.

17
Leonardo
<html>
<head>
<meta charset="utf-8">
<title>test</title>

<style>
#grad1 {
  height: 400px;
  width: 600px;
  background-image: url(t1.jpg);/* Select Image Hare */
}


#gradup {
  height: 100%;
  width: 100%;
  background: radial-gradient(transparent 20%, white 70%); /* Set radial-gradient to faded edges */

}
</style>

</head>

<body>
<h1>Fade Image Edge With Radial Gradient</h1>

<div id="grad1"><div id="gradup"></div></div>

</body>
</html>
0
Sunny