H5圖片設(shè)置CSS樣式

在HTML5中，圖片的設(shè)置可以通過(guò)CSS樣式來(lái)實(shí)現(xiàn)，這可以讓我們更加靈活地控制圖片在網(wǎng)頁(yè)上的顯示效果，下面是一些常見的CSS樣式設(shè)置：

1、圖片大小：通過(guò)CSS，我們可以輕松地改變圖片的大小，我們可以使用width和height屬性來(lái)設(shè)置圖片的寬度和高度。

img {
    width: 300px;
    height: 200px;
}

2、圖片位置：CSS中的position屬性可以用來(lái)設(shè)置圖片的位置，我們可以選擇使用static、relative、absolute或fixed等不同的值來(lái)調(diào)整圖片的位置。

img {
    position: relative;
    left: 50px;
    top: 30px;
}

3、圖片邊框：我們可以使用CSS的border屬性來(lái)設(shè)置圖片的邊框，這個(gè)屬性允許我們指定邊框的寬度、樣式和顏色。

img {
    border: 2px solid #000;
}

4、圖片背景：CSS的background屬性可以用來(lái)設(shè)置圖片的背景，我們可以使用url()函數(shù)來(lái)指定背景圖片的路徑，并使用其他CSS屬性來(lái)調(diào)整背景的位置、大小和重復(fù)方式。

div {
    background: url('image.jpg') no-repeat center center;
    background-size: cover;
}

5、圖片透明度：CSS中的opacity屬性可以用來(lái)設(shè)置圖片的透明度，這個(gè)屬性的值范圍從0（完全透明）到1（完全不透明）。

img {
    opacity: 0.5;
}

6、圖片響應(yīng)式：為了讓圖片在不同的設(shè)備上都能顯示得很好，我們可以使用CSS的響應(yīng)式設(shè)計(jì)技巧來(lái)設(shè)置圖片的寬度和高度，這樣，圖片就可以在不同的屏幕尺寸下都能保持清晰和美觀了。

img {
    width: 100%;
    height: auto;
}