CSS是一種用于網頁樣式設計的語言，它可以控制網頁中的各種元素，其中包括圖片。在這篇文章中，我們將介紹如何使用CSS實現圖片的黑白效果。
/* CSS代碼示例 */
img{
filter: grayscale(100%);
}如上面的CSS代碼所示，我們可以使用filter屬性來實現圖片的黑白效果。其中grayscale是CSS的濾鏡，取值范圍為0%到100%，我們可以根據需求自行調整。
為了方便演示，我們將使用一張名為“colorful.jpg”的圖片來實現黑白效果。首先，我們需要在HTML代碼中插入圖片：
<!-- HTML代碼示例 -->
當然，在實際應用中，我們可能會將圖片背景設置成黑色或白色，以達到更好的效果。下面是HTML和CSS的完整代碼示例：
<!-- HTML代碼 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>黑白圖片</title>
<style>
/* CSS代碼 */
body{
background-color: black;
}
img{
filter: grayscale(100%);
}
</style>
</head>
<body>
<!-- 圖片 -->
</body>
</html>通過以上的示例代碼，在瀏覽器中我們可以實現一張彩色圖片的黑白效果。當然，除了grayscale，CSS中還有其它一些濾鏡可以實現更多的圖片效果，如blur、opacity等等。希望本文能夠對讀者在進行網站設計時有所幫助。
上一篇div 寫入 html
下一篇div 動態滾動