CSS的背景屬性可以讓我們設(shè)置網(wǎng)頁的背景,使網(wǎng)頁更加美觀。CSS中的背景位置能夠調(diào)整背景位置。
背景位置有多種設(shè)置方式:
background-position: center; /*將背景設(shè)置在頁面中心*/ background-position: right bottom; /*將背景設(shè)置在頁面右下角*/ background-position: 50% 50%; /*將背景設(shè)置在頁面中心*/ background-position: -10px 100px; /*將背景向左移動10px,向下移動100px*/
需要注意的是,背景屬性中的位置設(shè)置是相對于其父元素的。
我們可以將設(shè)置背景的div元素的position屬性設(shè)置為relative,然后在此基礎(chǔ)上調(diào)整背景位置。
div { background-image: url(image.jpg); background-repeat: no-repeat; background-position: center; height: 300px; position: relative; } div::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, .5); }
以上代碼中,我們在div元素中設(shè)置了背景圖片,并將背景位置設(shè)置為center。接著,我們使用偽元素::after創(chuàng)建了一個半透明白色蒙版,來讓背景圖片更加清晰。
總之,CSS背景位置的設(shè)置有多種方式,讓我們能夠更好地控制網(wǎng)頁的布局和美觀程度。
上一篇css背景全局