CSS中img插入圖片 在前端網頁設計中，插入圖片是十分常見的操作。那么，CSS中的img標簽怎樣插入圖片呢？ 要使用CSS插入圖片，需要通過img標簽的src屬性來指定圖片的路徑， 如： ```html ``` 這只是普通的HTML標簽，如果我們要使用CSS來設置它的樣式，可以給其添加類名或ID，以便在CSS里找到它。如： ```html ``` ```css .picture { width: 500px; height: 300px; border: 1px solid black; box-shadow: 2px 2px 2px gray; } ``` 上述代碼中，通過設置類名“picture”， 在CSS中就可以對這幅圖片進行樣式設置了。 這里設置了圖片的寬和高、邊框和陰影效果。 另外，在一些布局需求中，我們也可以使用CSS的background 屬性來插入圖片。如： ```html``` ```css .box { width: 400px; height: 400px; background-image: url("picture.jpg"); background-size: cover; } ``` 通過將背景圖片指定到一個div標簽上， 這個盒子就可以呈現出如下的樣式。 除了這兩種方法，CSS中img標簽還可以通過一些新特性來實現更酷的效果。如利用CSS3中的“transform”屬性，可以使用360度旋轉、縮放等效果。代碼如下： ```css img{ transform: rotate(180deg) scaleX(-1) translateY(-50%); transform-origin: right center; } ``` 上述代碼通過transform 使圖片旋轉180度，水平翻轉， 上移，并將旋轉中心定在圖片右邊中心位置。最終效果如下： 總結： CSS中使用img標簽插入圖片比較簡單，主要通過設置src屬性和類名或ID來進行樣式設置。只要深入掌握CSS的各種屬性，就能實現更絢麗多彩的圖片效果。