99re热这里只有精品视频,7777色鬼xxxx欧美色妇,国产成人精品一区二三区在线观看,内射爽无广熟女亚洲,精品人妻av一区二区三区

W3.CSS Effects (效果)

2020-12-08 16:11 更新

W3.CSS提供以下效果類：

類 定義
w3-opacity
為元素添加不透明度/透明度（不透明度：0.6）
w3-opacity-min
為元素添加不透明度/透明度（不透明度：0.75）
w3-opacity-max 為元素添加不透明度/透明度（不透明度：0.25）
w3-grayscale
向元素添加灰度效果（灰度：75％）
w3-grayscale-min
向元素添加灰度效果（灰度：50％）
w3-grayscale-max
向元素添加灰度效果（灰度：100％）
w3-sepia
為元素添加深褐色效果（深褐色：75％）
w3-sepia-min
為元素添加深褐色效果（深褐色：50％）
w3-sepia-max
為元素添加深褐色效果（深褐色：100％）
w3-hover-opacity
為懸停時(shí)的元素添加透明度（不透明度：0.6）
w3-hover-grayscale
向懸停時(shí)的元素添加灰度效果（灰度：100％）
w3-hover-sepia
在懸停時(shí)為元素添加棕褐色效果

不透明度

w3-opacity 類添加透明度元素：

實(shí)例

<img src="image.jpg" class="w3-opacity-min">

<img src="image.jpg" class="w3-opacity">

<img src="image.jpg" class="w3-opacity-max">


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

灰階

w3-grayscale 類添加的灰度效果的元素：

實(shí)例

<img src="image.jpg" class="w3-grayscale-min">

<img src="image.jpg" class="w3-grayscale">

<img src="image.jpg" class="w3-grayscale-max">


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

注意： IE 11和更早版本不支持w3-grayscale類。

棕褐色

w3-sepia 類添加棕褐色效果的元素：

實(shí)例

<img src="image.jpg" class="w3-sepia-min">

<img src="image.jpg" class="w3-sepia">

<img src="image.jpg" class="w3-sepia-max">


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

注意： IE 11和更早版本不支持w3-sepia類。

懸停效果

您還可以在懸停/鼠標(biāo)懸停上添加特殊效果。

實(shí)例

<img src="image.jpg" class="w3-hover-opacity">

<img src="image.jpg" class="w3-hover-grayscale">

<img src="image.jpg" class="w3-hover-sepia">


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

懸停不透明度顏色

您還可以將任何w3-hover-color類與w3-hover-opacity結(jié)合使用，以在懸浮時(shí)創(chuàng)建稍微“更淺”的背景色：

實(shí)例

<div class="w3-border w3-hover-opacity w3-hover-red">

  <p>w3-hover-red with w3-hover-opacity</p>

</div>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)