在圖文并茂的頁(yè)面設(shè)計(jì)中，經(jīng)常會(huì)出現(xiàn)圖片和按鈕重合在一起的情況。CSS樣式可以很好地解決這個(gè)問(wèn)題。

/* 設(shè)置按鈕樣式 */
.button {
background-color: red;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
/* 設(shè)置圖片樣式 */
.image {
width: 200px;
height: 200px;
background-image: url("example.jpg");
background-size: cover;
}
/* 重合樣式 */
.overlay {
position: relative;
display: inline-block;
}
.overlay .button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.overlay .image {
z-index: -1;
}

上述代碼中，我們定義了一個(gè)樣式類(lèi)`.button`，用于設(shè)置按鈕的基本樣式；定義了樣式類(lèi)`.image`，用于設(shè)置圖片的基本樣式。接著定義了重合樣式類(lèi)`.overlay`，用于使按鈕和圖片重疊在一起。在`.overlay`內(nèi)部，我們使用了`position: absolute`來(lái)使按鈕定位于圖片上，使用了`transform`來(lái)使按鈕居中對(duì)齊。而將`.image`的`z-index`設(shè)為`-1`，則可以讓圖片處于底層，使按鈕在圖片上面覆蓋顯示。

通過(guò)以上的CSS樣式，就能夠?qū)崿F(xiàn)圖片和按鈕的重合效果，為頁(yè)面設(shè)計(jì)增加更多美感和實(shí)用性。