我們?cè)陂_發(fā)的時(shí)候，有大量的場(chǎng)景需要將文字至于圖片之上，如圖:

以上是將“空山新雨后，天氣晚來(lái)秋”加在圖片之上。對(duì)于大多數(shù)情況，我們都可以將圖片作為背景圖引入，但有些時(shí)候不能將圖片作為背景圖引入，這個(gè)時(shí)候就要用到其他的方法，以下我們提供三種方法來(lái)實(shí)現(xiàn)以上場(chǎng)景。

方法一：引入背景圖片(background-image: url(path))

在引入背景圖片的時(shí)候，我們需要注意背景圖片的大小，如果和div大小不同，則我們需要調(diào)整background-size屬性使圖片適配div大小。代碼如下：

<div id="container"><div class="imgbox box1">空山新雨后，天氣晚來(lái)秋</div> </div> <style> #container .imgbox{height: 216px;width: 384px;} #container .box1 {font-size: 20px;color: ivory;background-image: url(../static/images/redLeafage.jpg);background-size: 384px 216px;/* background-size: inherit; */background-repeat: no-repeat;text-align: right;} </style>

方法二：絕對(duì)定位

對(duì)于不能將圖片作為背景的情況，用絕對(duì)定位的方法即可實(shí)現(xiàn)文字置于圖片之上，該情況下，圖片也可以設(shè)置透明度，并且不用設(shè)置圖片寬高，讓其適應(yīng)父div寬高即可，較為方便。代碼如下：

<div id="container"><p>法一：</p><div class="imgbox"><img src="../static/images/redLeafage.jpg"><lable>空山新雨后，天氣晚來(lái)秋</lable></div> </div> <style> #container .imgbox{height: 216px;width: 384px;} #container img {position: absolute;/*設(shè)為絕對(duì)定位*/opacity: 0.7;/*設(shè)置透明度*/} #container lable {width: inherit;text-align: right;font-size: 20px;color: ivory;position: absolute;/*設(shè)為絕對(duì)定位*/} </style>

設(shè)置了透明度以后，以上代碼呈現(xiàn)的效果如下：

方法三：將圖片置于底層

除了以上兩種方法以外，還可以通過(guò)將圖片置于底層的方式讓文字置于圖片之上，這種情況要借助絕對(duì)布局和相對(duì)布局，不僅可實(shí)現(xiàn)兩個(gè)div層疊的場(chǎng)景，對(duì)于更為復(fù)雜的場(chǎng)景也適用，實(shí)現(xiàn)圖片效果的代碼如下：

<div class="imgbox"><!-- 最外層div設(shè)置為絕對(duì)定位 --><div style="position: absolute;"><img class="box-img" src="../static/images/redLeafage.jpg"><div class="box-font">空山新雨后，天氣晚來(lái)秋</div></div> </div> <style> #container .imgbox{height: 216px;width: 384px;}#container .box-img {position: relative;/*相對(duì)布局*/z-index: -1;/*置于底層*/} #container .box-font {font-size: 20px;color: ivory;position: absolute;/*絕對(duì)布局*/z-index: 1;/*置于上層*/display: inline;top: 0;right: 0;} </style>

使用該方法時(shí)，對(duì)于文字的絕對(duì)布局，需要用定位元素對(duì)文字的位置進(jìn)行定位。

以上是某對(duì)文字置于圖片場(chǎng)景的幾種嘗試，若各位有更為簡(jiǎn)潔的方法，歡迎留言討論技術(shù)，謝謝。

總結(jié)

以上是生活随笔為你收集整理的css将文字置于图片上的方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。