Filtr jasności Crossbrowser na img przy użyciu css

Potrzebuję użyć pełnowymiarowego obrazu jako tła i potrzebuję tego obrazu, aby mieć filtr jasności.Filtr jasności Crossbrowser na img przy użyciu css

W tej chwili działa tylko na Chrome i Firefox, ostatnim przy użyciu svg.

To jest to, co mam:

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 dla Windows nie działa z tym, ani Internet Explorer 11.

Czego mi brakuje? Czy możesz polecić mi inny sposób osiągnięcia tego samego?

Dzięki

Źródło

2014-04-24 codiaf

Ani Safari 5.x ani wsparcie IE11 'filter' patrz: http://caniuse.com/css-filters – Dai

Jeśli ponowić img jako w inline SVG i SVG przejść całą drogę to zadziała w IE10. (Safari/Windows jest martwym produktem, zatrzymał się w wersji 5) –

Można użyć nakładki pseudo z RGBA() lub niskostopowych() kolorów. Ten works we wszystkich przeglądarkach, dla IE8 można użyć -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/

Źródło

2014-04-29 11:28:21 Kunsang

To nie jest jasność, ale lekkość. – igorpavlov

Myślę, że to dobre rozwiązanie, działa we wszystkich popularnych przeglądarkach. Po prostu zmieniłbym ostatnią linię css na "background: rgba (0,0,0,0.5);" . – joalcego

To nie działa, jeśli zastosujesz tę sztuczkę do tagu img, ponieważ img nie może mieć: przed lub: po (https://lildude.co.uk/after-css-property-for-img-tag). –

ja też wpadłem na ten sam problem. Wyniki dochodzenia, znaleziono kod dla 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>

Źródło

2016-08-04 12:07:08 taim

Filtr jasności Crossbrowser na img przy użyciu css

Odpowiedz

Powiązane problemy