少去飽和
描述
它降低了元素中顏色的強度或飽和度。它有以下參數:
color:它代表顏色對象。
amount:它包含0 - 100%之間的百分比。
方法:它是可選參數,通過將其設置為相對,用于相對于當前值進行調整。
例子
下面的例子演示了在LESS文件中使用去飽和色彩操作:
<html> <head> <title>Desaturate</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <h2>Example of Desaturate Color Operation</h2> <div class="myclass1"> <p>color :<br> #426105</p> </div><br> <div class="myclass2"> <p>result :<br> #415c0a</p> </div> </body> </html>
接下來,創建文件style.less。
風格
.myclass1{ height:100px; width:100px; padding: 30px 0px 0px 25px; background-color: hsl(80, 90%, 20%); color:white; } .myclass2{ height:100px; width:100px; padding: 30px 0px 0px 25px; background-color: desaturate(hsl(80, 90%, 20%), 10%); color:white; }
您可以使用以下命令將style.less編譯為style.css:
lessc style.less style.css
接下來執行上面的命令,它將用下面的代碼自動創建style.css文件:
style.css
.myclass1 { height: 100px; width: 100px; padding: 30px 0px 0px 25px; background-color: #426105; color: white; } .myclass2 { height: 100px; width: 100px; padding: 30px 0px 0px 25px; background-color: #415c0a; color: white; }
輸出
讓我們執行以下步驟,看看上面的代碼如何工作:
將以上html代碼保存在desaturate.html文件中。
在瀏覽器中打開此HTML文件,將顯示如下輸出。