CSS 圖片

首先我們先引入一張圖片,加上一句描述語,使用div 承載.

  <div class="image">
    <a href="./1348306907524.jpg" target="_self">
        <img src="1348306907524.jpg" width="150px" height="150px">
    </a>
    </div>
    <div>beautiful </div>

就是下面的效果:

接下來我們就開始自訂圖片的顯示:

圖片加邊框,修改描述字體中對其,修改字體大小,將整個div 向左浮動,使邊框與圖片進行貼合:

.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;
}

這就是處理過後的效果

#之後我麼再設計圖片的透明度:這個比較簡單,就只需要在圖片CSS 設定中加入:

opacity: 0.5;

這個屬性的值範圍為0-1 設定透明度,0 為完全透明, 1 代表完全不透明.

下面就是半透明的效果圖: