CSS如何讓圖片在圖片中

CSS（層疊樣式表）是一種用于描述網(wǎng)頁樣式的語言，其中包含了各種樣式規(guī)則，用于控制網(wǎng)頁中元素的顯示方式，在CSS中，我們可以使用相對定位（relative positioning）和***定位（absolute positioning）來實現(xiàn)圖片在圖片中的效果。

相對定位是指通過設定元素的position屬性為relative，然后利用top、right、bottom、left屬性來調整元素的位置，而***定位則是通過設定元素的position屬性為absolute，然后利用top、right、bottom、left屬性來設定元素的位置。

下面是一個簡單的示例，展示如何使用CSS來實現(xiàn)圖片在圖片中的效果：

HTML代碼：

<div class="container">
  <img class="image" src="image1.jpg" alt="Image 1">
  <img class="image" src="image2.jpg" alt="Image 2">
</div>

CSS代碼：

.container {
  position: relative;
  width: 500px;
  height: 500px;
}
.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

在這個示例中，我們創(chuàng)建了一個名為container的div元素，并設定了其寬度和高度，我們在這個div元素中放置了兩個名為image的img元素，并設定了其寬度和高度，我們使用CSS的position屬性來設定這兩個img元素的位置，由于我們設定了position為absolute，所以這兩個img元素將會按照我們設定的top、left、width和height屬性來顯示，在這個示例中，我們將兩個圖片疊加在一起，從而實現(xiàn)了圖片在圖片中的效果。