本文目錄導讀：

1. 圖片大小控制
2. 圖片位置控制

如何用CSS控制圖片樣式與展示

在現(xiàn)代網(wǎng)頁設(shè)計中，CSS（層疊樣式表）是一種強大的工具，用于描述網(wǎng)頁的外觀和格式，除了文本元素，CSS還可以用來調(diào)整圖片的形狀、大小、位置等，本文將介紹如何通過CSS來優(yōu)化圖片的展示和樣式，但不涉及如何用CSS設(shè)置圖片的形狀。

圖片大小控制

使用CSS的“width”和“height”屬性可以輕松調(diào)整圖片的大小，如果你想讓圖片寬度為50%，可以這樣寫：

img {
    width: 50%;
}

你也可以使用像素值來設(shè)定具體的大小。

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

這將使得所有圖片都調(diào)整為設(shè)定的寬度和高度，需要注意的是，如果原始圖片的寬高比例與設(shè)定的不同，可能會出現(xiàn)圖片變形的情況，此時可以使用“object-fit”屬性來控制圖片的填充方式。

圖片位置控制

CSS中的“position”屬性可以用來控制圖片的位置，你可以使用靜態(tài)定位（static）、相對定位（relative）、***定位（absolute）等不同的定位方式?！皌op”、“right”、“bottom”、“l(fā)eft”等屬性可以用來微調(diào)圖片的位置。

img {
    position: relative;
    top: 10px;
    left: 20px;
}

這將使得圖片相對于其原始位置下移10像素，左移20像素，這對于調(diào)整頁面布局非常有用。

三. 圖片邊框與背景控制

在CSS中，你可以給圖片添加邊框或者改變其背景色以增加視覺效果，使用border屬性添加邊框或使用background屬性改變背景色。

```css

img {

border: 2px solid #ff0000; /* 添加紅色邊框 */

background-color: #ffff00; /* 改變背景色為黃色 */

``` 以上的CSS樣式會給所有的img標簽添加紅色邊框和黃色背景色。 CSS提供了豐富的工具來控制和優(yōu)化圖片的展示和樣式，除了調(diào)整大小、位置和邊框背景外，你還可以使用其他CSS特性如陰影、透明度等來實現(xiàn)更豐富的視覺效果，熟練掌握這些技巧，將大大提高你的網(wǎng)頁設(shè)計水平。