溫馨提示×

CSS grayscale()實(shí)例講解

css
小億
112
2023-12-19 05:49:46
欄目: 編程語言

CSS grayscale()函數(shù)可以將元素的圖像轉(zhuǎn)換為灰度圖像。它可以接受一個參數(shù)，表示轉(zhuǎn)換的程度。參數(shù)的值范圍是0到1，其中0表示原始圖像，1表示完全灰度。

以下是一個示例，演示如何使用grayscale()函數(shù)將圖像轉(zhuǎn)換為灰度：

<!DOCTYPE html>
<html>
<head>
<style>
/* 將圖像轉(zhuǎn)換為50%的灰度 */
img {
  filter: grayscale(0.5);
}
</style>
</head>
<body>

<img src="example.jpg" alt="Example Image">

</body>
</html>

在上面的示例中，我們使用了grayscale(0.5)來將圖像轉(zhuǎn)換為50%的灰度。這意味著圖像會變得部分灰色，但仍然保留一些顏色。

你也可以使用grayscale()函數(shù)將元素的背景圖片轉(zhuǎn)換為灰度。以下是一個示例：

<!DOCTYPE html>
<html>
<head>
<style>
/* 將背景圖片轉(zhuǎn)換為完全灰度 */
div {
  width: 300px;
  height: 300px;
  background-image: url("example.jpg");
  background-size: cover;
  filter: grayscale(1);
}
</style>
</head>
<body>

<div></div>

</body>
</html>

在上面的示例中，我們使用了grayscale(1)來將背景圖片轉(zhuǎn)換為完全灰度。這意味著背景圖片會變得完全灰色，不再顯示任何顏色。

使用grayscale()函數(shù)可以給網(wǎng)頁添加一種獨(dú)特的效果，可以用于創(chuàng)建黑白照片效果或者為圖片添加一些特殊的視覺效果。

0 踩