免費(fèi)AI編程助手
W3.CSS Images (圖像)
圓角圖像
使用 w3-round 類制作圖像的圓角：
實(shí)例
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
帶圓圈的圖像
使用 w3-circle 類制作帶圓圈的圖像：
帶邊框的圖像
使用 w3-border 類制作帶邊框的圖像：
實(shí)例
<img src="snowtops.jpg" class="w3-border w3-padding" alt="Alps">
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
卡片化圖像
使用 w3-card-* 類包裝在 <img> 元素周圍，以將其顯示為卡片（添加陰影）：
實(shí)例
<div class="w3-card-4">
<img src="img_avatar.png" alt="Person">
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
圖像文本
使用 w3-display-classes 將文本放置在圖像中：
實(shí)例
<div class="w3-display-container w3-text-white">
<img src="img_lights.jpg" alt="Lights" style="width:100%">
<div class="w3-display-topleft w3-container"><p>左上方</p></div>
<div class="w3-display-topright w3-container"><p>右上方</p></div>
<div class="w3-display-bottomleft w3-container"><p>左下方</p></div>
<div class="w3-display-bottomright w3-container"><p>右下方</p></div>
<div class="w3-display-left w3-container"><p>左</p></div>
<div class="w3-display-right w3-container"><p>右</p></div>
<div class="w3-display-middle w3-large">中間</div>
<div class="w3-display-topmiddle w3-container"><p>頂部</p></div>
<div class="w3-display-bottommiddle w3-container"><p>底部</p></div>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
響應(yīng)式圖像
可以將圖像設(shè)置為自動(dòng)調(diào)整自身大小以適合其容器的大小。
如果要根據(jù)需要縮小圖像，但絕不要放大到大于原始大小，請(qǐng)使用 w3-image 類。
實(shí)例
<img src="img_lights.jpg" alt="Lights" style="width:100%">
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
如果要將響應(yīng)圖像限制為最大大小，請(qǐng)使用 max-width 屬性：
實(shí)例
<img src="img_lights.jpg" alt="Lights" style="width:100%;max-width:400px">
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
不透明度
w3-opacity 類使圖像透明：
實(shí)例
<img src="img_forest.jpg" alt="Forest" class="w3-opacity-min">
<img src="img_forest.jpg" alt="Forest" class="w3-opacity">
<img src="img_forest.jpg" alt="Forest" class="w3-opacity-max">
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
灰度
使用 w3-grayscale 類為圖像增加一個(gè)灰度效果：
實(shí)例
<img src="image.jpg" alt="Table" class="w3-grayscale-min">
<img src="image.jpg" alt="Table" class="w3-grayscale">
<img src="image.jpg" alt="Table" class="w3-grayscale-max">
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
提示： IE 11和更早版本不支持 w3-grayscale 類。
棕褐色
使用 w3-sepia 類為圖像添加棕褐色效果：
實(shí)例
<img src="image.jpg" alt="Table" class="w3-sepia-min">
<img src="image.jpg" alt="Table" class="w3-sepia">
<img src="image.jpg" alt="Table" class="w3-sepia-max">
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
提示： IE 11 和更早版本不支持 w3-sepia 類。
懸停效果
您還可以在懸停/鼠標(biāo)懸停上添加特殊效果。
實(shí)例
<img src="image.jpg" alt="Einstein" class="w3-hover-opacity">
<img src="image.jpg" alt="Einstein" class="w3-hover-grayscale">
<img src="image.jpg" alt="Einstein" class="w3-hover-sepia">
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
關(guān)閉不透明度
w3-hover-opacity 類添加鼠標(biāo)懸停在圖像上時(shí)的透明度，w3-hover-opacity-off 類去除鼠標(biāo)懸停透明度。
實(shí)例
<img src="snowtops.jpg" class="w3-hover-opacity" alt="Alps">
<img src="snowtops.jpg" class="w3-opacity w3-hover-opacity-off" alt="Alps">
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
制作相冊(cè)
在此示例中，我們使用 W3.CSS 響應(yīng)網(wǎng)格系統(tǒng)創(chuàng)建在所有設(shè)備上看起來都不錯(cuò)的相冊(cè)。稍后您將詳細(xì)了解。
實(shí)例
<div class="w3-third">
<div class="w3-card">
<img src="img_monterosso.jpg" style="width:100%">
<div class="w3-container">
<h4>蒙特羅索</h4>
</div>
</div>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
更多建議：