CSS 圖片
首先我們先引入一張圖片,加上一句描述語(yǔ),使用div 承載.
<div class="image"> <a href="./1348306907524.jpg" target="_self"> <img src="1348306907524.jpg" width="150px" height="150px"> </a> </div> <div>beautiful </div>
就是下面的效果:
接下來(lái)我們就開(kāi)始自訂圖片的顯示:
圖片加邊框,修改描述字體中對(duì)其,修改字體大小,將整個(gè)div 向左浮動(dòng),使邊框與圖片進(jìn)行貼合:
.image{ border: 2px solid darkgrey; width: auto; height: auto; float: left; text-align: center; padding: 5px;
}img{ padding: 5px;
}.text{ font-size: 20px; margin-bottom: 5px;
}這就是處理過(guò)後的效果
#之後我麼再設(shè)計(jì)圖片的透明度:這個(gè)比較簡(jiǎn)單,就只需要在圖片CSS 設(shè)定中加入:
opacity: 0.5;
這個(gè)屬性的值範(fàn)圍為0-1 設(shè)定透明度,0 為完全透明, 1 代表完全不透明.
下面就是半透明的效果圖:
