CSS是一種用來控制網(wǎng)頁樣式的語言,它可以幫助我們將文字、圖片等元素呈現(xiàn)出我們想要的效果,今天我們就來學(xué)習(xí)如何在圖片上寫字。
img{ position:relative; } p{ position:absolute; top:0; left:0; color:#fff; font-size:24px; background-color:rgba(0,0,0,0.5); padding:10px; }
首先,我們需要給圖片設(shè)置相對(duì)定位(position:relative;),這樣我們才能在圖片上使用絕對(duì)定位(position:absolute;)來放置文字。接著,我們需要給文字設(shè)置絕對(duì)定位,并將其放置在圖片的左上角(top:0; left:0;)。此外,我們還可以通過color、font-size、background-color、padding等屬性來調(diào)整文字的樣式,讓它更加美觀。這里我們將背景顏色設(shè)置為半透明,這樣文字將會(huì)看起來更加突出。
有了以上的代碼,我們已經(jīng)可以在圖片上寫字了。下面是一個(gè)例子:
<div class="container"> <img src="image.jpg"> <p>這是一段文字</p> </div>
通過在容器內(nèi)放置一張圖片和一段文字,我們就可以將文字放置在圖片上了。如果我們想在不同的圖片上使用不同的文字,只需要重復(fù)上述步驟即可。
下一篇css如何分開添加顏色