CSS3濾鏡詳解--相容器問題解決
CSS3中提供濾鏡的屬性是：filter 他的值有
blur( <length> )：模糊值，預設值為0 越大月模糊
以下預設值為100%
brightness( [ <number（數值）> | <percentage（百分比）> ])：亮度
contrast( [ <number> | <percentage> ] )：對比度
saturate( [ <number> |<percentage> ] )：飽和度
grayscale( [ <number> |<percentage> ] )：灰度
opacity( [ <number> |<percentage> ] )：透明度
hue-rotate( <angle> )：色相旋轉 預設值為：0deg
以下預設值為0
invert( [ <number> |<percentage> ] )：反色
sepia() = sepia([ <number> | <percentage> ] ):褐色
drop-shadow( <length>{2,3}：陰影 預設值為0
例項：
04galleryBegin.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>例項演示-濾鏡使用</title>
<link rel="stylesheet" type="text/css" href="css/clolorChange.css"/>
<link rel="stylesheet" type="text/css" href="css/galleryBegin.css"/>
<script type="text/javascript" src="js/prefixfree.min.js" ></script>
</head>
<body>
<div class="cardfan">
<img src="img/1.jpg" alt="" />
<img src="img/2.jpg" alt="" />
<img src="img/3.jpg" alt="" />
</div>
<script>
var polyfilter_scriptpath='js/lib/';
</script>
<!--解決相容性問題-->
<script type="text/javascript" src="js/lib/contentloaded.js" ></script>
<script type="text/javascript" src="js/lib/css-filters-polyfill.js" ></script>
<script type="text/javascript" src="js/lib/cssParser.js" ></script>
</body>
</html>
/*設定div的寬度 外邊距 位置*/
.cardfan{
width: 30%;
margin: 4em auto;
position: relative;
}
/*設定圖片的樣式*/
.cardfan img{
position: absolute;
width: 100%;
height: auto;
/*邊框*/
border: 10px solid #fff;
/*陰影上 右 左 下*/
box-shadow: 2px 2px 4px 0 rgba(0,0,0,2);
/*旋轉圖片的基點位置*/
transform-origin: center 600px;
/*transition屬性是一個速記屬性有四個屬性：transition-property, transition-duration, transition-timing-function, and transition-delay。*/
transition: all .5s;
/*一些不同的游標：*/
cursor: pointer;
}
/*第一張圖片正常情況下設定*/
.cardfan img:nth-child(1){
transform: rotate(-10deg);
z-index: 3;
/*灰度 0為正常 1位灰色*/
filter: grayscale(1);
}
/*第一張圖片觸控情況下設定*/
.cardfan img:nth-child(1):hover{
transform: rotate(-25deg);
filter: grayscale(0);
}
.cardfan img:nth-child(2){
filter:sepia(1);
}
.cardfan img:nth-child(2):hover{
filter:sepia(0);
}
.cardfan img:nth-child(3){
transform: rotate(10deg);
z-index: -1;
filter: blur(3px);
}
.cardfan img:nth-child(3):hover{
transform: rotate(25deg);
filter: blur(0);
}