W3.CSS Effects
Normal
w3-opacity
w3-grayscale-max
w3-sepia-max
W3.CSS Effect Classes
W3.CSS provides the following effects classes:
Class
Defines
w3-opacity
Adds opacity/transparency to an element (opacity: 0.6)
w3-opacity-min
Adds opacity/transparency to an element (opacity: 0.75)
w3-opacity-max
Adds opacity/transparency to an element (opacity: 0.25)
w3-grayscale
Adds a grayscale effect to an element (grayscale: 75%)
w3-grayscale-min
Adds a grayscale effect to an element (grayscale: 50%)
w3-grayscale-max
Adds a grayscale effect to an element (grayscale: 100%)
w3-sepia
Adds a sepia effect to an element (sepia: 75%)
w3-sepia-min
Adds a sepia effect to an element (sepia: 50%)
w3-sepia-max
Adds a sepia effect to an element (sepia: 100%)
w3-hover-opacity
Adds transparency to an element on hover (opacity: 0.6)
w3-hover-grayscale
Adds a grayscale effect to an element on hover (grayscale: 100%)
w3-hover-sepia
Adds a sepia effect to an element on hover
Opacity
The w3-opacity classes add transparency to an element:
Normal
w3-opacity-min
w3-opacity
w3-opacity-max
例子
自己尝试 »
Grayscale
The w3-grayscale classes add a grayscale effect to an element:
Normal
w3-grayscale-min
w3-grayscale
w3-grayscale-max
例子
自己尝试 »
Note: The w3-grayscale classes are not supported in IE 11
and earlier versions.
Sepia
The w3-sepia classes add a sepia effect to an element:
Normal
w3-sepia-min
w3-sepia
w3-sepia-max
例子
自己尝试 »
Note: The w3-sepia classes are not supported in IE 11 and
earlier versions.
Hover Effects
You can also add special effects on hover/mouse-over.
w3-hover-opacity
w3-hover-grayscale
w3-hover-sepia
例子
自己尝试 »
Hover Opacity Color
You can also combine any w3-hover-color classes with w3-hover-opacity to create a slightly "lighter" background color on hover:
w3-hover-red
w3-hover-red with w3-hover-opacity
例子
w3-hover-red with w3-hover-opacity
自己尝试 »