码农教程 - 一技在手,衣食无忧! tools

W3.CSS 效果

❮ 上一节 下一节 ❯

普通的

w3-不透明度

w3 灰度最大

w3-棕褐色-max

W3.CSS效果类

W3.CSS提供了以下效果类：

类 定义
w3-不透明度 为元素添加不透明度/透明度（不透明度：0.6）
w3-不透明度-最小值 为元素添加不透明度/透明度（不透明度：0.75）
w3-不透明度-最大值 为元素添加不透明度/透明度（不透明度：0.25）
w3-灰度 为元素添加灰度效果（灰度：75%）
w3-灰度-最小值 为元素添加灰度效果（灰度：50%）
w3 灰度最大 为元素添加灰度效果（灰度：100%）
w3-棕褐色 为元素添加棕褐色效果（棕褐色：75%）
w3-棕褐色-分钟 向元素添加深褐色效果（深褐色：50%）
w3-棕褐色-max 向元素添加深褐色效果（深褐色：100%）
w3-悬停不透明度 为悬停时的元素添加透明度（不透明度：0.6）
w3-悬停灰度 为悬停时的元素添加灰度效果（灰度：100%）
w3-悬停-棕褐色 为悬停时的元素添加棕褐色效果

不透明度

这个w3-不透明度类为元素添加透明度：

普通的

w3-不透明度-最小值

w3-不透明度

w3-不透明度-最大值

示例

<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 灰度最大

示例

<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-棕褐色-分钟

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 类。

悬停效果

您还可以在悬停/鼠标悬停时添加特殊效果。

Norway

w3-悬停不透明度

Norway

w3-悬停灰度

Norway

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-悬停不透明度在悬停时创建稍微 "lighter" 的背景颜色：

w3-悬停-红色

w3-hover-red 与 w3-hover-opacity

示例

<div class="w3-border w3-hover-opacity w3-hover-red">
  <p>w3-hover-red with w3-hover-opacity</p>
</div>
亲自试一试»

❮ 上一节 下一节 ❯