Comment puis-je le flou d'une image à l'aide de css, mais de garder la frontière droite?

Je suis en train de flou de l'image à l'aide de CSS. Je suis usig "flou" mais je trouve cela aussi brouille la frontière. Est-il un moyen de garder la frontière droite, mais le flou le reste de l'image?

http://www.inserthtml.com/2012/06/css-filters/

css

filter: filter(value);
-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);
InformationsquelleAutor sharataka | 2012-11-01
  1. 11

    Essayer quelque chose comme cela:

    HTML:

    <div id="container">
   <img id="image" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Benz-velo.jpg/220px-Benz-velo.jpg">
</div>​

    CSS:

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

   margin:-1px;
   padding:1px;
}

#container{
   width:222px;
   height:179px;
   overflow:hidden;
}

    La marge sur l'image semble être nécessaire pour certaines raisons (au moins dans Chrome).

    Également sur jsfiddle: http://jsfiddle.net/jdwire/HUaBV/1/.

    • tout hack pour firefox et les autres navigateurs?
    InformationsquelleAutor Joshua Dwire
  2. 3

    Vous aurez probablement besoin de mettre cette image dans un bloc au niveau de l'élément et l'ensemble de ses dimensions pour correspondre à l'image et ajouter overflow: hidden.

    • Comment puis-je faire? Je viens juste de commencer avec les CSS...pouvez-vous me montrer comment vous pouvez le faire ou me diriger vers un tutoriel?
    • Boucher +1 pour l'emballage avec un overflow:hidden div, mais Chrome semble exiger une marge sur l'image pour que cela fonctionne. (Voir ma réponse.)
    InformationsquelleAutor Kevin Boucher
  3. 0

    Envelopper un div autour de l'image et de la taille de la div quelques pixels plus petit que l'image est de taille moyenne (sinon le bord du flou de ne pas être rognée). Ensuite, mettre overflow:hidden sur la div.

    Voir le jsFiddle démo ici.

    InformationsquelleAutor brentonstrine
  4. 0

    Ont un div avec la frontière, juste enfermer sur elle, puis le flou de l'image.

    css

    div.container
{
border:2px solid #000000;
display:inline-block;
}

img.theimage
{
filter: filter(value);
-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);
}

    html

    <div class="container">
<img class="theimage" src="iamgesrc.jpg" />
</div>
    InformationsquelleAutor Spencer May
  5. 0

    De garder les bords pointus, vous pouvez déplacer l'image à l'intérieur de son conteneur à gauche et en haut de la même quantité de flou, ce sera de nettoyer le haut/gauche bords. Pour aiguiser le bas/la droite bords de réduire la largeur de l'image du conteneur par 2 * la quantité de flou.

    #image {
    filter: blur(5px);
    -webkit-filter: blur(5px); /* support appears limited http://caniuse.com/#search=css%20filter%20effects */
    margin-left: -5px; /* move the image negative x-blur distance */
    margin-top: -5px; /* move the image negative y-blur distance */
}
#container {
    /* actual image size is 220px * 177px */
    width: 210px; /* subtract 2 * x-blur from width */
    height: 167px; /* subtract 2 * y-blur from height */
    overflow: hidden;
}

    Joshua Violon détaillée ici: http://jsfiddle.net/3EHe9/

    InformationsquelleAutor Reggie Pinkham