在CSS3中,content:url
是一種很有用的屬性。這個屬性可以讓你通過指定圖片的路徑來給某個元素添加背景圖或者插入圖片。
/* 添加背景圖 */
div {
background-image: url("image.png");
width: 200px;
height: 200px;
}
/* 插入圖片 */
p:before {
content: url("icon.png");
margin-right: 10px;
}
可以看到,content:url
可以用來給偽元素添加圖片,比如使用:before
和:after
。這樣可以讓元素的內容更加豐富并且美觀。
同時,content:url
還可以用來控制圖片的大小和位置。
p:before {
content: url("icon.png");
width: 20px;
height: 20px;
vertical-align: middle;
}
上面的代碼中,通過指定圖片的寬高來控制圖片的大小,并且通過設置vertical-align: middle;
使圖片在垂直居中位置。
總之,content:url
是一個非常實用的CSS屬性,可以幫助我們更好地控制元素的內容。