1

Web-Kit ブラウザーで動作する css があります (代替テキストが表示されている場合):

 .image { -webkit-filter: grayscale(100%) brightness(2) opacity(0.5);}

ただし、FireFox、Opera、IE8+ などの他のブラウザのサポートが必要です

だから私は次のCSSの更新を使用して期待される結果を得ようとします:

 .image {       
 -webkit-filter: grayscale(100%) brightness(2) opacity(0.5);
    -moz-filter: grayscale(100%) brightness(2) opacity(0.5);
    -o-filter: grayscale(100%) brightness(2) opacity(0.5);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
}

IE の場合、web-kit 用のすべての css プロパティをカバーしているとは思いません。

しかし、これは Mozilla と IE では機能しません。

実際の例: https://jsfiddle.net/fdf5kx5z/1/

アップデート

ちょうど追加するとopacity:0.5; color: #999999、期待するものにはるかに近づきます。

4

1 に答える 1

1

CSS ポストプロセッサーによって生成されたコードを使用してみることができます。

.image { 
  filter: url('data:image/svg+xml;charset=utf-8,
    <svg xmlns="http://www.w3.org/2000/svg">
    <filter id="filter">
    <feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" />
    <feComponentTransfer color-interpolation-filters="sRGB">
      <feFuncR type="linear" slope="2" />
      <feFuncG type="linear" slope="2" />
      <feFuncB type="linear" slope="2" />
    </feComponentTransfer>
    <feComponentTransfer color-interpolation-filters="sRGB">
      <feFuncA type="table" tableValues="0 0.5" />
    </feComponentTransfer>
    </filter>
    </svg>#filter'); 
   -webkit-filter: grayscale(100%) brightness(2) opacity(0.5); 
   filter: grayscale(100%) brightness(2) opacity(0.5);
}

これはPleease!によって生成されました。

于 2014-11-06T16:56:33.803 に答える