CSS技巧收集——巧用濾鏡

時間 2019-11-17

標籤 css 技巧收集巧用欄目 CSS 简体版

原文原文鏈接

<!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);css

/*該濾鏡會下降圖片的色值使其變爲灰色，它與 sepia 接受的參數一致，只有 1 和 100% 有效。*/
-webkit-filter:grayscale(1);html

/*該濾鏡用於設置圖片的飽和度，它接收一個非負數值做爲參數，爲 0 時圖片爲純黑白效果。*/
-webkit-filter:saturate(3);web

/*該濾鏡用於指定圖片色相值的具體偏移量，它接收一個角度值做爲參數，可正可負。*/
-webkit-filter:hue-rotate(60deg);spa

/*該濾鏡會產生反色效果，參數也只接收 1 或 100%。*/
-webkit-filter:invert(1);htm

/*該濾鏡就是用到的模糊效果，其接收一個非負的像素值做爲參數。*/
-webkit-filter:blur(3px);圖片

/*該濾鏡會產生透明效果，參數爲 0-1 之間的小數或百分比。*/
-webkit-filter:opacity(.5);utf-8

/*該濾鏡用於提高圖片亮度，當參數小於等於 0 時，爲全黑*/
-webkit-filter:brightness(3);ci

/*該濾鏡用於提高對比度，當參數小於等於 0 時，爲全灰。*/
-webkit-filter:contrast(3);it

/*css 的濾鏡主要是上面這些，須要提示的是濾鏡不是同時只能用一種，你能夠經過組合來達到本身想要的效果*/
-webkit-filter:sepia(1) saturate(4) hue-rotate(300deg);
}
</style>
<body>
<div class="box">
<img src="images/5.jpg" alt="">
</div>
</body>
</html>ast

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。