當我們在網站開發中,想要向網頁添加圖片時,往往需要用到CSS代碼。通過CSS代碼,我們可以設置圖片大小、位置和樣式等,使網頁更加美觀。
img { width: 200px; height: 200px; display: block; margin: 0 auto; border-radius: 50%; border: 3px solid #000; }
這段代碼的意思是,設置圖片的寬和高都為200像素,將圖片的顯示方式設置為塊級元素,讓其在文檔流中獨占一行;通過設置margin屬性,使圖片水平居中;使用border-radius屬性,將圖片變為圓形;使用border屬性,給圖片加上3像素的黑色實線邊框。
如果我們想添加背景圖片,也可以通過CSS代碼實現:
body { background-image: url("background.jpg"); background-size: cover; background-position: center; }
這段代碼的意思是,將背景圖片設置為名為background.jpg的圖片,設置background-size屬性為cover,讓圖片完全覆蓋背景;使用background-position屬性,使圖片在頁面中垂直和水平方向上居中。
除此之外,我們還可以利用CSS代碼實現更多關于圖片的效果,如陰影、透明度、動畫效果等。讓我們在網站開發中充分發揮CSS代碼的功能,為網頁添加更加精美的圖片效果。