CSS 圖片透明(Transparency)屬性

介紹 圖片透明(Transparency)屬性 滑屬滑入圖片事件、屬性值應用、圖片空間大小

範例:圖片無指定透明度

圖片無透明度

CSS 圖片透明(Transparency)屬性語法:
opacity:0.6; /* 最大數值字為1 */
filter:alpha(opacity=60); /*最大數值為100 ,用於IE8 及其早期版本語法 */

範例:圖片透明度

圖片透明度

範例:滑鼠與圖片 變化透明度

opacity:0.6;
filter:alpha(opacity=60); /* IE8 及其早期版本語法 */

圖片透明度

指定圖片空間大小

height:數值px; width:數值px; (px或%...等單位)


範例::滑鼠游標與圖片透明屬性的檢視

範例觀測重點 :

動手實驗一下 : 將 屬性值改變看看變化了什麼


小技巧: 圖片設最大寬度max-width:100% , height:auto ,讓圖片不撐開<div>版面容器


圖片1

說明:上下圖是同樣包在100x80px <div>版面大小(白色虛線框),但上一張圖沒安份的在指定面積內, 下圖設屬性 max-width:100% , height:auto ,就乖乖縮<div>容器裡

圖片2

語法:

<div style="width:100px; height:80px;"><img src="sample1.jpg" alt="圖片" style="max-width:100%; height:auto"></div>