如何使用 CSS 實現滑鼠懸停時的灰階和顏色恢復？

使用CSS 實現滑鼠懸停時顏色恢復的灰度化

可以透過多種方法實現滑鼠懸停時顏色恢復的灰階外觀，在IE 和Firefox 中提供跨瀏覽器相容性。

方法1：純CSS（使用單色影像）

此技術利用供應商的濾鏡屬性在所有支援的瀏覽器中對影像進行灰階化的前綴：

<code class="css">img.grayscale {
  filter: url("data:image/svg+xml;utf8, ..."); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+ */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}</code>

方法2：純CSS（使用兩個影像）

另一種方法涉及使用兩個影像：灰階版本和彩色版本。最初顯示灰階影像，懸停狀態轉換為彩色影像：

<code class="css">img {
  transition: all .6s ease;
}

img:hover {
  opacity: 0;
}

.grayscale {
  opacity: 1;
}</code>

<code class="html"><img class="grayscale" src="grayscale_image.jpg">
<img class="colored" src="colored_image.jpg"></code>

方法3：具有CSS 濾鏡的SVG

適用於IE10和現代瀏覽器一樣，內嵌SVG 可用於應用濾鏡，從而動態控制灰階效果：

<code class="css">svg image {
  transition: all .6s ease;
}

svg image:hover {
  opacity: 0;
}</code>

<code class="xml"><svg ...>
  <defs>
    <filter id="filtersPicture">
      <feColorMatrix type="saturate" values="0" />
    </filter>
  </defs>
  <image filter="url(#filtersPicture)" ... />
</svg></code>

以上是如何使用 CSS 實現滑鼠懸停時的灰階和顏色恢復？的詳細內容。更多資訊請關注PHP中文網其他相關文章！