css3 filter 濾鏡
阿新 • • 發佈：2018-11-02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:100%;
height:100px;
margin:10px;
text-align:center
}
.div1 img{
-webkit-filter:blur(1px);
filter:blur(1px);
}
/*blur() 高斯模糊.接受一個css長度值作為引數,可以是 px/vw/vh/rem 等單位,唯獨不能是%.值越大越模糊*/
.div2 img{
-webkit-filter:brightness(4.8);
filter:brightness(4.8);
}
/*brightness() 亮度.使圖片更亮或者更暗.引數為百分比,預設為1.當引數為0時,圖片全黑;引數可以大於100%,也可以是小數點形式*/
.div3 img{
-webkit-filter: contrast(0.5);
filter:contrast(0.5);
}
/*contrast() 對比度. 對比度是指一幅圖片中明暗區域最亮的白和最暗的黑之間不同亮度層級的測量,差異範圍越大代表對比越大,差異越小代表對比越小*/
.div4 img{
-webkit-filter: saturate(300%);
filter:saturate(300%);
}
/*saturate() 飽和度. 是圖片變暗下來或者更鮮明.引數為百分比,預設為1,或者大於100%*/
.div5 img{
-webkit-filter: opacity(0.8);
filter:opacity(0.8);
}
/*opacity() 透明度. 跟css3中的opacity屬性效果是一致的,而使用filter,一些瀏覽器為了提升效能會提供硬體加速*/
.div6 img{
-webkit-filter: grayscale(1);
filter:grayscale(1);
}
/*grayscale() 灰度級. 將影象轉換為灰度影象.引數為百分比,預設為0.若設定100%,則完全轉化為灰度影象*/
.div7 img{
-webkit-filter: hue-rotate(180deg);
filter:hue-rotate(180deg);
}
/*hue-rotate() 色相旋轉. 色相是色彩的首要特徵.是區別各種不同色彩的最準確的標準.事實上任何黑白灰以外的顏色都有色相的屬性,
而色相也是由原色、間色和複雜色來構成的。hue-rotate()函式通過旋轉角度對色相進行旋轉從而改變影象在視覺上的效果.引數為度數deg
*/
.div8 img{
-wekbit-filter:invert(1);
filter:invert(1);
}
/*invert() 反色. 反色又叫補色,紅的補色是綠色,藍的補色是橙色,黃的補色是紫色,由著三種對比關係可引出很多對比的反色.在畫圖程式中,
反色操作是指把畫面中的黑色變為白色,白色變為黑色,綠色變為紅色,黃色變為紫色.引數為百分比,不能超過100%.
*/
.div9 img{
-webkit-filter: sepia(0.5);
filter:sepia(0.5);
}
/*sepia() 將影象轉化為深褐色,發黃發舊的效果,引數為百分比,預設為0,不超過100%*/
.box1 img{
-webkit-filter: grayscale(1);
filter:grayscale(1);
cursor:pointer;
}
.box1 img:hover{
-webkit-filter:grayscale(0);
filter:grayscale(0);
}
.box1{
width:100%;
height:auto;
margin:10px;
text-align:center;
}
.blur-box{
position:relative;
width:200px;
height:150px;
background:url("../images/bg0.jpg");
padding-top:50px;
background-size:100% 100%;
z-index:-1;
margin:0 auto;
}
.blur-img{
position: relative;
width:150px;
height:80px;
line-height:80px;
padding:10px;
margin:auto;
color:#fff;
overflow: hidden;
}
.blur-img:before{
content:'';
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
background:url("../images/bg0.jpg") no-repeat;
background-position: -50px -50px;
background-size:300px 200px;
-webkit-filter: blur(5px);
filter:blur(5px);
z-index:-1
}
</style>
</head>
<body>
<div class="div1"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div2"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div3"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div4"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div5"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div6"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div7"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div8"><img src="../images/bg0.jpg" width="100" height="100"></div>
<div class="div9"><img src="../images/bg0.jpg" width="100" height="100"></div>
<hr/>
<center>常見案例</center>
<div class="box1">
<h5>滑鼠上移效果,預設為灰色,滑鼠移動變為彩色</h5>
<img src="../images/bg0.jpg" width="200" height="200">
</div>
<center>毛玻璃效果</center>
<div class="blur-box">
<div class="blur-img">這是毛玻璃效果</div>
</div>
</body>
</html>