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

在编写该代码时,
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的精灵技术,在鼠标路过时就会出现{}里设置的效果

你可能感兴趣的:(浏览器,XHTML)