CSS中的background-image屬性可以設置HTML元素的背景圖片。在設置背景圖片時,默認情況下,圖片的顯示屬性是平鋪(repeat)且位于元素的左上角。
.example { background-image: url('example.jpg'); /* 默認屬性:平鋪且位于元素左上角 */ }
當然,我們可以通過其他的CSS屬性來改變圖片的默認屬性。以下是一些可用的CSS屬性:
- background-repeat:設置圖片的平鋪方式??蛇x值有repeat、repeat-x、repeat-y和no-repeat。
- background-position:設置圖片的位置??蛇x值包括關鍵字(如top、bottom等)和像素值。
- background-size:設置圖片的大小??蛇x值包括像素值、百分比和關鍵字(如contain和cover)。
.example { background-image: url('example.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; }
通過修改以上屬性,我們可以在不改變HTML元素結構的情況下改變圖片的顯示效果。