CSS中包含圖片可以通過background屬性來實現。比如以下代碼:
div { background: url('background.jpg') no-repeat center center; }
上面的代碼將一個名為background.jpg的圖片作為div元素的背景圖像來展示。同樣的方式在CSS中也可以使用在其他元素上。這種方法適用于使用一個單一的圖片來填充元素的背景,但是如果需要將一張圖片嵌套在另一張圖片中,就需要使用另一種方式。
一種方式是使用CSS position屬性和z-index屬性。比如以下代碼:
div { background: url('background.jpg'); position: relative; } div img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; }
使用上面的代碼可以將一個名為background.jpg的圖片作為div元素的背景,并嵌套一張名為img.jpg的圖片。其中使用了position:relative將div元素定位,然后使用position:absolute將img元素相對于div元素進行定位。通過使用z-index來確保img元素位于background.jpg圖片上面。
另一種常用的方式是使用CSS3 transform屬性和scale屬性。比如以下代碼:
div { background: url('background.jpg') center center no-repeat; width: 400px; height: 400px; position: relative; } div img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5); }
使用上面的代碼可以將同樣的background.jpg與嵌套的img圖片進行組合。可以看到,img圖片使用了translate(-50%, -50%)將其移動到div元素的中央,并使用scale(0.5)將img元素縮小為50%的原始大小。這種方式可以適用于將多張圖片進行組合成一張圖片來展示。