在CSS中,您可以通過使用background-image
屬性來添加背景圖片,但如果您想要在已有的背景圖片上再添加一張新的背景圖片,那么您可以通過使用background-position
和background-repeat
屬性來實現(xiàn)。
我們需要給元素添加兩張背景圖片,我們可以使用逗號來分隔這兩張圖片,
element { background-image: url('image1.png'), url('image2.png'); }
我們可以使用background-position
屬性來設(shè)置這兩張圖片的位置,我們可以讓***張圖片顯示在元素的左上角,而第二張圖片顯示在元素的右下角:
element { background-image: url('image1.png'), url('image2.png'); background-position: left top, right bottom; }
我們可以使用background-repeat
屬性來設(shè)置這兩張圖片的重復(fù)方式,我們可以讓***張圖片不重復(fù),而第二張圖片重復(fù)填充整個元素:
element { background-image: url('image1.png'), url('image2.png'); background-position: left top, right bottom; background-repeat: no-repeat, repeat; }
通過這樣的設(shè)置,我們就可以在已有的背景圖片上再添加一張新的背景圖片,并且控制它們的顯示位置和重復(fù)方式。