CSS技巧收集——巧用滤镜
2016-07-18 00:00
483 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<style>
.box {
width: 500px;
height: 200px;
margin: 100px auto;
/*该滤镜会将图片的色相值收敛到35-40，产生一种老旧照片的感觉。且 sepia 接受的参数只能为 1 或者 100%，其他数值均不会产生任何效果。*/
-webkit-filter:sepia(1);
/*该滤镜会降低图片的色值使其变为灰色，它与 sepia 接受的参数一致，只有 1 和 100% 有效。*/
-webkit-filter:grayscale(1);
/*该滤镜用于设置图片的饱和度，它接收一个非负数值作为参数，为 0 时图片为纯黑白效果。*/
-webkit-filter:saturate(3);
/*该滤镜用于指定图片色相值的具体偏移量，它接收一个角度值作为参数，可正可负。*/
-webkit-filter:hue-rotate(60deg);
/*该滤镜会产生反色效果，参数也只接收 1 或 100%。*/
-webkit-filter:invert(1);
/*该滤镜就是用到的模糊效果，其接收一个非负的像素值作为参数。*/
-webkit-filter:blur(3px);
/*该滤镜会产生透明效果，参数为 0-1 之间的小数或百分比。*/
-webkit-filter:opacity(.5);
/*该滤镜用于提升图片亮度，当参数小于等于 0 时，为全黑*/
-webkit-filter:brightness(3);
/*该滤镜用于提升对比度，当参数小于等于 0 时，为全灰。*/
-webkit-filter:contrast(3);
/*css 的滤镜主要是上面这些，需要提示的是滤镜不是同时只能用一种，你可以通过组合来达到自己想要的效果*/
-webkit-filter:sepia(1) saturate(4) hue-rotate(300deg);
}
</style>
<body>
<div class="box">
<img src="images/5.jpg" alt="">
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<style>
.box {
width: 500px;
height: 200px;
margin: 100px auto;
/*该滤镜会将图片的色相值收敛到35-40，产生一种老旧照片的感觉。且 sepia 接受的参数只能为 1 或者 100%，其他数值均不会产生任何效果。*/
-webkit-filter:sepia(1);
/*该滤镜会降低图片的色值使其变为灰色，它与 sepia 接受的参数一致，只有 1 和 100% 有效。*/
-webkit-filter:grayscale(1);
/*该滤镜用于设置图片的饱和度，它接收一个非负数值作为参数，为 0 时图片为纯黑白效果。*/
-webkit-filter:saturate(3);
/*该滤镜用于指定图片色相值的具体偏移量，它接收一个角度值作为参数，可正可负。*/
-webkit-filter:hue-rotate(60deg);
/*该滤镜会产生反色效果，参数也只接收 1 或 100%。*/
-webkit-filter:invert(1);
/*该滤镜就是用到的模糊效果，其接收一个非负的像素值作为参数。*/
-webkit-filter:blur(3px);
/*该滤镜会产生透明效果，参数为 0-1 之间的小数或百分比。*/
-webkit-filter:opacity(.5);
/*该滤镜用于提升图片亮度，当参数小于等于 0 时，为全黑*/
-webkit-filter:brightness(3);
/*该滤镜用于提升对比度，当参数小于等于 0 时，为全灰。*/
-webkit-filter:contrast(3);
/*css 的滤镜主要是上面这些，需要提示的是滤镜不是同时只能用一种，你可以通过组合来达到自己想要的效果*/
-webkit-filter:sepia(1) saturate(4) hue-rotate(300deg);
}
</style>
<body>
<div class="box">
<img src="images/5.jpg" alt="">
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 