W3.CSS 效果
正常
w3-opacity
w3-grayscale-max
w3-sepia-max
W3.CSS 效果類
W3.CSS 提供了以下效果類
| 類 | 定義 |
|---|---|
| w3-opacity | 為元素新增不透明度/透明度 (opacity: 0.6) |
| w3-opacity-min | 為元素新增不透明度/透明度 (opacity: 0.75) |
| w3-opacity-max | 為元素新增不透明度/透明度 (opacity: 0.25) |
| w3-grayscale | 為元素新增灰度效果 (grayscale: 75%) |
| w3-grayscale-min | 為元素新增灰度效果 (grayscale: 50%) |
| w3-grayscale-max | 為元素新增灰度效果 (grayscale: 100%) |
| w3-sepia | 為元素新增棕褐色效果 (sepia: 75%) |
| w3-sepia-min | 為元素新增棕褐色效果 (sepia: 50%) |
| w3-sepia-max | 為元素新增棕褐色效果 (sepia: 100%) |
| w3-hover-opacity | 懸停時為元素新增透明度 (opacity: 0.6) |
| w3-hover-grayscale | 懸停時為元素新增灰度效果 (grayscale: 100%) |
| w3-hover-sepia | 懸停時為元素新增棕褐色效果 |
不透明度
w3-opacity 類為元素新增透明度
正常
w3-opacity-min
w3-opacity
w3-opacity-max
示例
<img src="image.jpg" class="w3-opacity-min">
<img src="image.jpg" class="w3-opacity">
<img src="image.jpg" class="w3-opacity-max">
自己試試 »
灰度
w3-grayscale 類為元素新增灰度效果
正常
w3-grayscale-min
w3-grayscale
w3-grayscale-max
示例
<img src="image.jpg" class="w3-grayscale-min">
<img src="image.jpg" class="w3-grayscale">
<img src="image.jpg" class="w3-grayscale-max">
自己試試 »
注意： w3-grayscale 類在 IE 11 及更早版本中不受支援。
棕褐色
w3-sepia 類為元素新增棕褐色效果
正常
w3-sepia-min
w3-sepia
w3-sepia-max
示例
<img src="image.jpg" class="w3-sepia-min">
<img src="image.jpg" class="w3-sepia">
<img src="image.jpg" class="w3-sepia-max">
自己試試 »
注意： w3-sepia 類在 IE 11 及更早版本中不受支援。
懸停效果
你也可以新增特殊效果以實現懸停/滑鼠移入效果。
w3-hover-opacity
w3-hover-grayscale
w3-hover-sepia
示例
<img src="image.jpg" class="w3-hover-opacity">
<img src="image.jpg" class="w3-hover-grayscale">
<img src="image.jpg" class="w3-hover-sepia">
自己試試 »
懸停不透明度顏色
你還可以將任何 w3-hover-color 類與 w3-hover-opacity 結合使用，以在懸停時建立稍微“更淺”的背景顏色
w3-hover-red
w3-hover-red 結合 w3-hover-opacity
示例
<div class="w3-border w3-hover-opacity w3-hover-red">
<p>w3-hover-red 結合 w3-hover-opacity</p>
</div>
自己試試 »
