在網(wǎng)頁設計中，經(jīng)常會用到圖片來豐富頁面的視覺效果。通過CSS樣式設置圖片，可以實現(xiàn)圖片的大小、位置、邊框等多種效果。下面介紹一些常用的CSS樣式設置圖片的方法。

img {
width: 500px; /*設置圖片寬度*/
height: 300px; /*設置圖片高度*/
margin: 10px; /*設置圖片四周的邊距*/
border: 2px solid #ccc; /*設置圖片邊框*/
float: left; /*使圖片左浮動*/
}

上述代碼中的img是CSS中的圖片選擇器，可以用它來選擇要設置的圖片。通過width和height屬性可以設置圖片的寬度和高度，margin屬性用于設置圖片周圍的邊距，border屬性設置圖片的邊框，float屬性使圖片左浮動。

div {
background-image: url("image.jpg"); /*設置背景圖片*/
background-repeat: no-repeat; /*不重復背景圖片*/
background-position: center; /*設置背景圖片位置*/
height: 500px; /*設置div高度*/
width: 100%; /*設置div寬度*/
}

如果想將一個圖片作為背景，可以使用CSS中的背景屬性。通過background-image屬性可以設置背景圖片的路徑，background-repeat屬性設置背景圖片是否重復，background-position屬性設置背景圖片的位置。

img:hover {
opacity: 0.5; /*設置圖片鼠標懸停時的透明度*/
cursor: pointer; /*設置鼠標懸停的光標樣式*/
}
img:active {
transform: scale(0.9); /*設置圖片鼠標按下時的縮放效果*/
}

為了讓圖片更有交互性，可以使用CSS中的偽類選擇器。上述代碼中，使用:hover偽類選擇器來設置當鼠標懸停在圖片上時的效果，使用:active偽類選擇器來設置當鼠標按下時的效果，其中opacity屬性用于設置透明度，cursor屬性用于設置鼠標懸停時的光標樣式，transform屬性用于設置縮放效果。