在網頁開發中,<img>
標簽用于顯示圖片。如果我們要對這些圖片進行樣式調整,就需要給<img>
標簽設置CSS屬性值。下面是一些常見的CSS屬性值及其效果:
img { width: 100px; /* 設置圖片寬度為100像素 */ height: 100px; /* 設置圖片高度為100像素 */ border: 1px solid #000; /* 設置圖片邊框為1像素寬的黑色線條 */ margin: 10px; /* 設置圖片與周圍元素間距為10像素 */ box-shadow: 2px 2px 5px #888; /* 設置圖片陰影效果 */ border-radius: 50%; /* 設置圖片為圓形 */ }
需要注意的是,這些CSS屬性值只對<img>
標簽有效。如果我們把上述樣式應用到其他元素上,可能會產生意想不到的效果。
此外,為了讓頁面加載更快,我們還可以使用CSS sprite技術來減少圖片請求次數。具體方法是將多張小圖合成一張大圖,然后在CSS中使用background-position
屬性來設置每個小圖的顯示位置。
.sprite { width: 50px; /* 設置小圖寬度為50像素 */ height: 50px; /* 設置小圖高度為50像素 */ background-image: url("sprite.jpg"); /* 設置背景為合成后的大圖 */ background-position: -100px -50px; /* 設置當前小圖在大圖中的位置 */ }
這樣做可以減少HTTP請求次數,從而加快頁面加載速度。
上一篇給圖片加css效果