css圖片怎么加字

CSS圖片是一種很常見的網頁設計元素，在網站制作中起到了非常重要的作用。但是，有時候圖片上需要加入文字，以便更好地表達網站的主題或者內容。那么，接下來將介紹幾種方法，讓我們來看一下具體實現吧！

/* 方法1：直接在圖片上加文字 */
img {
position: relative;
}
img::before {
content: "這里是您想要添加的文字";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5rem;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
}

上面的代碼意思是在圖片上使用偽元素before添加文字內容，然后通過position屬性將文字放在圖片上面，最后調整位置和樣式以達到我們想要的效果。

/* 方法2：使用背景圖片和文字標簽 */
div {
background: url("圖片路徑") no-repeat center center;
background-size: cover;
text-align: center;
height: 300px;
}
div p {
margin-top: 50px;
font-size: 1.5rem;
color: #fff;
}

這里我們在HTML代碼里添加一個div元素，然后使用CSS將之前準備好的圖片作為背景，并在div元素內添加一個p標簽用于顯示文字。這種方法比較靈活，可以自由定制文字和背景圖之間的距離和樣式。

/* 方法3：使用容器包裹圖片和文字 */這里是您想要添加的文字.container {
position: relative;
width: 100%;
height: 300px;
}
.container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5rem;
color: #fff;
text-align: center;
}