Crossbrowser filtre luminosité de plus de img en utilisant le css

J'ai besoin d'utiliser la taille réelle de l'image comme arrière-plan et j'ai besoin de cette image pour avoir un filtre luminosité.

Pour l'instant il est seul à travailler sur Chrome et Firefox, le dernier en utilisant svg.

C'est ce que j'ai:

img.fullscreenIMG 
{
   display:block;
   position:absolute;
   z-index:1;
   filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' ><filter id='bright30'><feComponentTransfer><feFuncR type='linear' slope='0.30'/><feFuncG type='linear' slope='0.30' /><feFuncB type='linear' slope='0.30' /></feComponentTransfer></filter></svg>#bright30");
   filter: brightness(0.6);
    -webkit-filter: brightness(0.6);
    -moz-filter: brightness(0.6);
    -o-filter: brightness(0.6);
    -ms-filter: brightness(0.6);
}

Safari 5.1.7 pour Windows ne fonctionne pas avec cela, ni Internet Explorer 11.

Ce qui me manque? Pouvez-vous me recommander de toute autre manière à atteindre le même?

Grâce

  • Ni Safari 5.x ni IE11 soutien filter, voir: caniuse.com/css-filters
  • Si vous refaites votre img comme un <image> dans inline SVG, et SVG aller tout le chemin, alors il sera de travailler dans IE10. (Safari/Windows est une mort produit btw, il s'est arrêté avec la version 5)
InformationsquelleAutor codiaf | 2014-04-24
  1. 5

    Vous pouvez utiliser un pseudo superposition avec rgba() ou en acier hsla() de la couleur. Cette fonctionne dans tous les navigateurs, pour IE8 vous pouvez utiliser -ms-filter.

    body {
    width: 100%; height: 100%;    
    background: url(#bgimage) no-repeat center top/cover fixed;
}
body:before {
    position: absolute; 
    z-index: 2;
    display: block; 
    content: "";
    top: 0; right: 0; bottom: 0; left: 0;  
    background: hsla(0,0%,0%,0.5);          /*adjust brightness here */
}

    http://jsfiddle.net/F79H8/

    • Ce n'est pas la luminosité, mais la légèreté.
    • Je pense que c'est une bonne solution, ça fonctionne pour moi dans tous les navigateurs les plus courants. J'ai juste modifier la dernière css ligne " background: rgba(0,0,0,0.5);' .
    • Il ne fonctionne pas si vous appliquez cette astuce pour une balise img, comme une img peut pas :avant ou :after ('lildude.co.royaume-uni/après-css-bien-pour-img-tag).
    InformationsquelleAutor Kunsang
  2. 1

    J'ai aussi couru dans le même problème. Les résultats de l'enquête, a trouvé le code pour IE11.

    <svg id="mySvg">
  <defs>
    <filter id="reduce">
      <feComponentTransfer>
        <feFuncR type="linear" slope="0.5"/>
        <feFuncG type="linear" slope="0.5"/>
        <feFuncB type="linear" slope="0.5"/>
      </feComponentTransfer>
    </filter>
  </defs>
  <image filter="url(#reduce)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="test.png" width="800" height="600"/>
</svg>
    InformationsquelleAutor taim