插入背景图时,为了保证图片与盒子边距有一定的距离,可以直接使用background-position属性的扩展语法,可以直接在位置关键字后加上偏移量。
background: yellowgreen url("about_env_a.png") no-repeat right 20px bottom 20px;
偏移量的位置是数值,还支持CSS的calc计算。
background: yellowgreen url("about_env_a.png") no-repeat calc(100% - 20px) calc(100% - 20px); // 与第一条效果相同
也可以直接使用background-origin属性,定义背景图的渲染位置,可以设置此属性为centent-box,让背景图在内容盒子的内部(贴合内边距)进行渲染。
background: yellowgreen url("about_env_a.png") no-repeat right bottom;
background-origin: content-box; // 与第一条效果相同