背景定位

?> 背景知识：:point_right: background-position, background-origin, calc

<script v-pre type="text/x-template" id="demo1"> <style> main{ width: 100%; padding: 80px 0px; display: flex; flex-wrap: wrap; justify-content: space-around; } div{ width: 229px; height: 139px; margin: auto; color: #f4f0ea; padding: 16px 29px 28px 20px; background: #b4a078 url('static/[email protected]') no-repeat bottom right / 78px 21px; } div:nth-of-type(1){ background-position: right 29px bottom 28px; } div:nth-of-type(2){ background-origin: content-box; margin: 29px 0; /* 移动端纵向排列上下间距 */ } div:nth-of-type(3){ background-position: calc(100% - 29px) calc(100% - 28px); } </style>

background-position方案

background-origin方案

calc方案

<script> </script> </script>

浏览器支持

<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=calc&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe> <iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-background-offsets&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="480px"></iframe>