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