前言

針對(duì)某個(gè)容器的某個(gè)角落，對(duì)背景圖片進(jìn)行偏移定位，所以就有了CSS3背景定位問(wèn)題，比如說(shuō)在右下角。

一、background-position

background-position屬性，允許我們指定背景圖片任意距離的偏移量，只要在偏移量前加上指定關(guān)鍵字。比如距右邊緣20px，底邊10px的偏移量。

代碼段：

 background: url(src/assets/航天-星箭.svg) no-repeat;

 background-position: right 20px bottom  10px;

效果圖：

 

 

除此之外，默認(rèn)的情況下background-position是以padding box為基準(zhǔn)的，默認(rèn)的top，left等都是指的是padding box的上與左（即左上角），不過(guò)在CSS3中使用的background-origin，則可以改變這種默認(rèn)基準(zhǔn)：

代碼段:

 background: skyblue url("src/assets/航天-星箭.svg") no-repeat bottom right;

 background-origin: content-box;

效果圖：

 

二、使用calc()函數(shù)

calc()是css3的一個(gè)新增的功能，用來(lái)指定元素的長(zhǎng)度，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性動(dòng)態(tài)的設(shè)置值。

不要忘記在calc()函數(shù)的內(nèi)部?jī)?nèi)部的“-”、“+”運(yùn)算符的兩側(cè)加上空白符，否則會(huì)產(chǎn)生解析錯(cuò)誤。

代碼段：

 background: url(src/assets/航天-星箭.svg) no-repeat;

 background-position:calc(100% - 20px) calc(100% - 10px);

效果圖：

 

總結(jié)

以上就是CSS3中解決背景定位的問(wèn)題（對(duì)背景圖片進(jìn)行偏移定位），如果在CSS中想要改變背景圖片的大小，可查看CSS3如何調(diào)整背景圖片大小

————————————————

版權(quán)聲明：本文為CSDN博主「犬萊八荒」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/weixin_37791679/article/details/127484841/