在CSS中,我們經常需要在網頁中顯示圖片。這時候就需要用到“<img>
”標簽了。但是,在CSS中,我們也可以使用圖片作為背景或者添加在一些元素中。這時候就需要用到CSS中的“background-image”或者“content: url()”了。
首先,讓我們看一下如何在CSS中使用“<img>
”標簽。在HTML中,我們使用以下代碼來顯示圖片:
<img src="image.png" alt="圖片">
在CSS中,我們可以通過“background-image
”屬性來設置圖片作為背景,如下所示:
div { background-image: url("image.png"); }
其中,“div
”是需要添加背景圖片的元素。
另外,在一些CSS偽類中,我們也可以使用“content: url()
”來添加圖片。如下所示:
a:after { content: url("image.png"); }
這樣就可以在鏈接后面添加一個圖片了。
需要注意的是,在設置圖片路徑時,需要根據文件夾的位置相對地指定圖片的路徑。如果圖片與CSS文件在同一文件夾中,則可以直接使用圖片的名稱來指定路徑。如果圖片在一個上級文件夾中,則需要使用“../”來表示上一級文件夾,并指定圖片路徑。
總結一下,在CSS中,我們可以使用“<img>
”標簽來顯示圖片,也可以使用“background-image”或者“content: url()”來添加圖片作為背景或者元素。在指定圖片路徑時,需要根據文件夾位置相對地指定路徑。
上一篇css里面可以寫絕對路徑
下一篇css里面加超鏈接