如果您想在網頁上將文字放在圖片上方,您可以使用CSS來實現。這是通過指定圖像為背景圖像,然后將文本放置在其上來實現的。
.example { background-image: url("image.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; color: #fff; font-size: 24px; text-align: center; line-height: 1.5; }
在上面的例子中,.example是元素的類名,可以根據需要進行更改。background-image屬性將圖片指定為元素的背景。background-position屬性可以將圖像垂直水平居中。background-repeat屬性指定圖像不應重復。background-size屬性指定圖像應該填充元素的大小。color屬性將文本顏色設置為白色。font-size屬性指定文本大小為24像素。text-align屬性使文本居中。line-height屬性設置行高,使文本位于圖像的中間位置。
由于背景圖像最初位于元素之后,因此將其放到前面需要使用z-index屬性。指定一個比默認z-index值高的數值來將元素前置。
.example { position: relative; z-index: 2; }
在此示例中,我們使用position: relative;將元素設置為相對定位
。