CSS中的圖片展示使用的元素主要有兩種:img標簽和background-image屬性。
// img標簽 img { width: 100px; height: 100px; // 圖片路徑 src: 'example.png'; } // background-image屬性 div { width: 100px; height: 100px; // 圖片路徑 background-image: url('example.png'); }
使用img標簽時,需要將圖片放在src屬性里,圖片的展示大小也可以通過width和height屬性進行控制。
使用background-image屬性時,需要將圖片路徑放在url()函數中,該屬性需要結合其他background屬性一起使用,如background-size、background-position、background-repeat等。
兩種元素的使用方式各有優缺點,img標簽方便且易于操作,但在需要背景透明或者在復雜布局下使用時可能會顯得不足;background-image屬性可以展示更復雜的效果,但使用時需要注意其他屬性的設置,屬性過多時也會顯得冗長。