0

Chrome では、以下の CSS で画像がぼやけます。ただし、Firefox で画像を表示すると、画像がぼやけなくなりました。ブラウザ間で動作させる方法に関するアドバイスはありますか?

div.wrapper{
    float:left; /* important */
    position:relative; /* important(so we can absolutely position the description div */ 
    padding: 5px;
}

div.imageblur{
    position: relative; 
    top: 0; 
    left: 0; 
    width: 320px; 
    filter: blur(5px);
       -webkit-filter: blur(5px);
       -moz-filter: blur(5px);
       -o-filter: blur(5px);
       -ms-filter: blur(5px);

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

div.image_container{
   width:318px;
   overflow:hidden;
}

html

<div class="wrapper">

            <!-- image -->
            <div style="position: relative; left: 0; top: 0;">

                <div class="image_container">
                    <div class="imageblur">     
                        <a href="youtube/IiGW9JA_aPg"> <img src="http://i2.ytimg.com/vi/IiGW9JA_aPg/hqdefault.jpg"></a>
                    </div>
                </div>                  
            </div>
            <!-- end image div -->

</div>
4

3 に答える 3

0

フィルターはFirefoxでもサポートされていますが、構文は少し複雑です。これがフィドルのサンプル例です。

img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: grayscale(100%);
}

フィルターの例

于 2012-11-21T14:37:21.483 に答える
0

これは、webkitがをサポートする唯一のものだからfilterです。http://caniuse.com/#feat=css-filters

参照：http ：//www.html5rocks.com/en/tutorials/filters/understanding-css/

于 2012-11-21T14:34:04.367 に答える
0

CSS フィルターは非常に新しいため、ほとんどサポートされていません。Safari (ナイトリー) と Chrome は、webkit のため、現時点では排他的にサポートしています。

于 2012-11-21T16:10:51.690 に答える