当前位置: 首页 > Web前端 > CSS

CSS揭秘《灵活的背景定位》

时间:2023-03-31 12:31:30 CSS

容器某个角的背景图片的偏移定位现在假设你想在容器的右下角向右偏移20px,向底部偏移10px。images/code-pirate.svg)无重复100%100%#58a;border-right:20pxsolidtransparent;border-bottom:10pxsolidtransparent;}2.为background-position指定右下角的值备注:因为在css3中已经扩展了background-position属性,允许我们指定背景图片相对于任意角的偏移量,只要我们在前面指定关键字div即可offset{背景:url(../images/code-pirate.svg)no-repeat#58a;背景位置:右20px下10px;/*上面这句是这样写的,效果是一样的background-position:bottom10pxright20px;*/}3.第二种方法的回退方案div{background:url(../images/code-pirate.svg)不重复右下角#58a;背景位置:右20px下10px;具体效果见链接4。使用padding加background-origin备注:此方案适用因为offset和容器的内边距一致,所以默认background-position是基于paddingbox的,所以background-position:topleft;topleft为padding框的左上角,默认取值为padding-box,这样border就不会挡住背景图片div{padding:10px20px;背景:url(../images/code-pirate.svg)no-repeat#58a右下;/*或100%100%*/background-origin:content-box;具体效果见链接5。使用透明边框并添加background-origindiv{padding:0;border-right:20pxsolidtransparent;border-bottom:10pxsolidtransparent;背景:url(../images/code-pirate.svg)不重复#58a右下角;/*或100%100%*/background-origin:padding-box;}6.使用calc计算宽高div{background:url(../images/code-pirate.svg)no-repeat#58a;背景位置:计算(100%-20px)计算(100%-10px);}具体效果见链接注:之前只知道在calc中计算需要在字符两边加一个空白字符,否则会出现解析错误。现在我知道真正的原因是为了向前兼容。将来,在calc()中可能会允许使用关键字,并且这些关键字可能包含字符(即减号)