在 CSS 中,圖片可以通過背景屬性或者 content 屬性來顯示。下面我們來看一下具體的實現方式。
1. 背景圖片
通過設置背景屬性,我們可以將一張圖片設置為元素的背景。代碼如下:
p { background-image: url("圖片路徑"); background-repeat: no-repeat; background-size: cover; }其中,background-image 屬性是指所使用的背景圖片的 URL。background-repeat 屬性設置圖片是否重復展示,這里我們設置為 no-repeat,表示不重復。background-size 屬性則是控制背景圖片的大小和尺寸,cover 值指的是“蓋住”整個元素的背景圖片,保持比例不變。 2. content 圖片 我們也可以通過 content 屬性來添加圖片。該方法要求我們先將圖片轉換成 Base64 編碼,然后將其插入到 content 中。代碼如下:
p:before { content: url(data:image/png;base64,iVBORw0KGg......); }其中,p:before 表示在元素前插入圖片,content 屬性中則需要填入圖片的 Base64 編碼。請注意,該方法只適用于小尺寸的圖片,較大的圖片會導致 CSS 加載延遲。 通過上述兩種方式,我們便可以將圖片嵌入到 CSS 中,實現炫酷的頁面設計效果。
上一篇css中圖片位置