css 渐变w3,W3.CSS效果

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

自己尝试 »