W3.CSS 效果
普通的
w3-不透明度
w3-灰度-max
w3-棕褐色-max
W3.CSS 效果类
W3.CSS 提供了以下效果类：
| 班级 | 定义 |
|---|---|
| w3-不透明度 | 为元素添加不透明度/透明度（不透明度：0.6） |
| w3-不透明度-最小 | 为元素添加不透明度/透明度（不透明度：0.75） |
| w3-不透明度-max | 为元素添加不透明度/透明度（不透明度：0.25） |
| w3-灰度 | 为元素添加灰度效果（灰度：75%） |
| w3-灰度最小值 | 为元素添加灰度效果（灰度：50%） |
| w3-灰度-max | 为元素添加灰度效果（灰度：100%） |
| w3-棕褐色 | 为元素添加棕褐色效果（棕褐色：75%） |
| w3-棕褐色-min | 为元素添加棕褐色效果（棕褐色：50%） |
| w3-棕褐色-max | 为元素添加棕褐色效果（棕褐色：100%） |
| w3-悬停不透明度 | 在悬停时为元素添加透明度（不透明度：0.6） |
| w3-悬停-灰度 | 在悬停时为元素添加灰度效果（灰度：100％） |
| w3-悬停-棕褐色 | 在悬停时为元素添加棕褐色效果 |
不透明度
这 w3-不透明度 类为元素添加透明度：
普通的
w3-不透明度-最小
w3-不透明度
w3-不透明度-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-灰度 类为元素添加灰度效果：
普通的
w3-灰度最小值
w3-灰度
w3-灰度-max
例子
<img src="image.jpg" class="w3-grayscale-min">
<img src="image.jpg" class="w3-grayscale">
<img src="image.jpg" class="w3-grayscale-max">
亲自尝试 »
笔记： IE 11 及更早版本不支持 w3-grayscale 类。
棕褐色
这 w3-棕褐色 类为元素添加棕褐色效果：
普通的
w3-棕褐色-min
w3-棕褐色
w3-棕褐色-max
例子
<img src="image.jpg" class="w3-sepia-min">
<img src="image.jpg" class="w3-sepia">
<img src="image.jpg" class="w3-sepia-max">
亲自尝试 »
笔记： IE 11 及更早版本不支持 w3-sepia 类。
悬停效果
您还可以在悬停/鼠标悬停时添加特殊效果。
w3-悬停不透明度
w3-悬停-灰度
w3-悬停-棕褐色
例子
<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-悬停颜色 课程w3-悬停不透明度 在悬停时创建稍微“浅”的背景颜色：
w3-悬停-红色
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>
亲自尝试 »
