在網頁設計中，經常需要使用圖片來豐富頁面的視覺效果。而 CSS 可以幫助我們簡單而又優雅地實現這樣的效果。

/* 圖片的基本樣式 */
img {
display: block; /* 將圖片轉為塊級元素 */
margin: 0 auto; /* 居中顯示 */
}
/* 使用 background-image 屬性嵌入圖片 */
.background-img {
background-image: url("圖片地址");
background-position: center; /* 圖片居中 */
background-repeat: no-repeat; /* 不重復 */
background-size: cover; /* 拉伸至容器大小 */
}
/* 使用 ::before 或 ::after 偽元素嵌入圖片 */
.before-img::before {
content: ""; /* 必須添加 content 屬性 */
display: block;
width: 100%;
height: 100%;
background-image: url("圖片地址");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 使用 content 屬性和 attr() 函數偽元素嵌入圖片 */
.attr-img::before {
content: attr(data-img-url); /* 獲取 data-img-url 屬性內容作為圖片地址 */
display: block;
margin: 0 auto;
width: 200px;
height: 200px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

使用 CSS 嵌入圖片的方式有多種，迥異的效果也可以通過不同的 CSS 屬性和值來實現。通過上面的 CSS 代碼可以看到，我們可以使用background-image屬性來將圖片直接作為背景，也可以使用偽元素::before和::after，或者利用content屬性和attr()函數來在頁面上嵌入圖片。

另外，在考慮圖片的排版問題時，我們可以通過設置圖片的display屬性為block，這樣可以更好地控制圖片的尺寸和位置，并免除一些排版問題。

總體來說，CSS 是一個強大的樣式語言，可以讓我們輕松地為網頁設計添加各種各樣的效果和元素。當然，選擇哪種方式來嵌入圖片，還需要根據實際情況和需求來靈活選擇。