关于滤镜的使用，使图片默认为全灰色 -

那朵花花名未闻

浏览: 3812 次
性别:

最近访客更多访客>>

fanguangzai123

风中追风骑大风

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (3)

社区版块

存档分类

2016-03 ( 3)
更多存档...

关于滤镜的使用，使图片默认为全灰色

浏览器 XHTML

在编写该代码时，
a:link img{
filter:gray;}
发现图片没有任何变化，则要考虑该浏览器是否兼容，可参考以下代码，在考虑所有浏览器兼容的情况下将图片设置为灰色
/*使图片默认全为灰色*/
a:link img{
    -webkit-filter: grayscale(<a href="https://www.baidu.com/s?wd=100%25&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3PjT1rHnkmHbvnHf4Phcs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHn3nHTdnHnLnjDYnWb1PHRYn0" target="_blank" class="baidu-highlight">100%</a>);
    -moz-filter: grayscale(<a href="https://www.baidu.com/s?wd=100%25&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3PjT1rHnkmHbvnHf4Phcs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHn3nHTdnHnLnjDYnWb1PHRYn0" target="_blank" class="baidu-highlight">100%</a>);
    -ms-filter: grayscale(<a href="https://www.baidu.com/s?wd=100%25&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3PjT1rHnkmHbvnHf4Phcs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHn3nHTdnHnLnjDYnWb1PHRYn0" target="_blank" class="baidu-highlight">100%</a>);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

如果想设置为/*在鼠标经过该图片时，将出现原本的图片颜色*/
a:hover img{
-webkit-filter: grayscale(<a href="https://www.baidu.com/s?wd=100%25&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3PjT1rHnkmHbvnHf4Phcs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHn3nHTdnHnLnjDYnWb1PHRYn0" target="_blank" class="baidu-highlight">0%</a>);
    -moz-filter: grayscale(<a href="https://www.baidu.com/s?wd=100%25&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3PjT1rHnkmHbvnHf4Phcs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHn3nHTdnHnLnjDYnWb1PHRYn0" target="_blank" class="baidu-highlight">0%</a>);
    -ms-filter: grayscale(<a href="https://www.baidu.com/s?wd=100%25&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3PjT1rHnkmHbvnHf4Phcs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHn3nHTdnHnLnjDYnWb1PHRYn0" target="_blank" class="baidu-highlight">0%</a>);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
    filter:"";}
a:hover被称为css的精灵技术，在鼠标路过时就会出现{}里设置的效果

分享到：