如何使用CSS過濾器(模糊,灰度,棕褐色等)來操縱圖像和元素?
CSS過濾器是一項強大的功能,可讓開發人員直接將各種效果直接應用於包括圖像的元素,而無需圖像編輯軟件。要使用CSS過濾器,請將filter
屬性應用於元素,然後將過濾器功能應用於您希望使用的過濾功能。您可以使用一些最常見的過濾器:
-
Blur :此濾鏡將高斯模糊應用於元素。您可以用像素中的值控制模糊量。
<code class="css">img { filter: blur(5px); }</code>
登入後複製
-
灰度:此過濾器將元素轉換為灰度。 100%的值導致完全灰度圖像。
<code class="css">img { filter: grayscale(100%); }</code>
登入後複製
-
棕褐色:此濾鏡使該元素具有棕褐色的音調。 100%的值導致完全棕褐色的圖像。
<code class="css">img { filter: sepia(100%); }</code>
登入後複製
您可以將這些過濾器應用於任何HTML元素,例如<img alt="如何使用CSS過濾器(模糊,灰度,棕褐色等)來操縱圖像和元素?" >
, <div>或<code><video></video>
,通過使用CSS選擇器定位並使用filter
屬性來將它們應用於<img alt="如何使用CSS過濾器(模糊,灰度,棕褐色等)來操縱圖像和元素?" >,
或