我想避免使用像素对背景位置和背景大小的值进行硬编码，并且我尝试使用百分比来设置两者。但是，如果我让它在一种视口大小（例如桌面）上工作，那么在平板电脑/移动设备视口大小上就会出现意想不到的情况。在下面的代码中，我仅使用绿卡的百分比，其余的都是硬编码的，但我也想重构它们。
我提到的问题是，当您调整浏览器窗口大小时，绿卡的背景图像会移动到底部（保持水平居中）并最终消失。我正在寻找一种不会发生这种情况并且保持响应的解决方案 - 也就是说，位置保持一致（如果可能的话）。
请在全页模式下运行代码片段并调整窗口大小以进行重现。
.section {
padding-block: 5rem
}
.container {
--padding: 2rem;
--max-width: 70rem;
margin-inline: auto;
width: min(100% - var(--padding), var(--max-width))
}
.flow>:where(:not(:first-child)) {
margin-top: var(--flow-spacer, 1rem)
}
.bg-brand-accent-100 {
background-color: #9ffeeb
}
.bg-yellow-300 {
background-color: #ffe2b8
}
.bg-pink-300 {
background-color: #f7b5cb
}
.bg-cyan-300 {
background-color: #9fe8fe
}
.card {
border-radius: 1rem;
box-shadow: none;
display: grid;
gap: .5rem;
line-height: 1.7;
padding: 1.5rem
}
.card,
.card__heading {
color: #404040;
font-family: system-ui
}
.card__heading {
font-size: 2rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1.1;
text-transform: none
}
.offset-grid {
display: grid;
gap: 1.5rem
}
@media screen and (min-width:45em) {
.offset-grid {
grid-template-columns: repeat(3, 1fr)
}
.offset-grid>:nth-child(4n+2),
.offset-grid>:nth-child(4n+3) {
grid-column: span 2
}
}
.offset-grid p {
max-width: 32ch
}
.offset-grid a {
text-decoration: underline
}
.feature-cards>:first-of-type {
background-image: url("data:image/svg+xml,%3Csvg width='60' height='51' viewBox='0 0 60 51' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M55.1596 0.578125H38.3839C36.7562 0.578125 35.1509 0.957499 33.695 1.6862C32.2391 2.41491 30.9727 3.47292 29.9961 4.77647C29.0195 3.47292 27.7531 2.41491 26.2972 1.6862C24.8414 0.957499 23.236 0.578125 21.6083 0.578125H4.8327C3.72041 0.578125 2.65367 1.02045 1.86716 1.80779C1.08065 2.59513 0.638794 3.663 0.638794 4.77647V38.3632C0.638794 39.4767 1.08065 40.5446 1.86716 41.3319C2.65367 42.1192 3.72041 42.5616 4.8327 42.5616H21.6083C23.2768 42.5616 24.8769 43.225 26.0566 44.4061C27.2364 45.5871 27.8992 47.1889 27.8992 48.8591C27.8992 49.4158 28.1201 49.9497 28.5134 50.3434C28.9066 50.7371 29.44 50.9583 29.9961 50.9583C30.5523 50.9583 31.0856 50.7371 31.4789 50.3434C31.8722 49.9497 32.0931 49.4158 32.0931 48.8591C32.0931 47.1889 32.7559 45.5871 33.9356 44.4061C35.1154 43.225 36.7155 42.5616 38.3839 42.5616H55.1596C56.2718 42.5616 57.3386 42.1192 58.1251 41.3319C58.9116 40.5446 59.3535 39.4767 59.3535 38.3632V4.77647C59.3535 3.663 58.9116 2.59513 58.1251 1.80779C57.3386 1.02045 56.2718 0.578125 55.1596 0.578125ZM21.6083 38.3632H4.8327V4.77647H21.6083C23.2768 4.77647 24.8769 5.43995 26.0566 6.62097C27.2364 7.80198 27.8992 9.40378 27.8992 11.074V40.4624C26.086 39.0966 23.8775 38.3596 21.6083 38.3632ZM55.1596 38.3632H38.3839C36.1148 38.3596 33.9062 39.0966 32.0931 40.4624V11.074C32.0931 9.40378 32.7559 7.80198 33.9356 6.62097C35.1154 5.43995 36.7155 4.77647 38.3839 4.77647H55.1596V38.3632ZM38.3839 11.074H48.8687C49.4248 11.074 49.9582 11.2951 50.3515 11.6888C50.7447 12.0825 50.9656 12.6164 50.9656 13.1732C50.9656 13.7299 50.7447 14.2638 50.3515 14.6575C49.9582 15.0512 49.4248 15.2723 48.8687 15.2723H38.3839C37.8278 15.2723 37.2944 15.0512 36.9012 14.6575C36.5079 14.2638 36.287 13.7299 36.287 13.1732C36.287 12.6164 36.5079 12.0825 36.9012 11.6888C37.2944 11.2951 37.8278 11.074 38.3839 11.074ZM50.9656 21.5698C50.9656 22.1266 50.7447 22.6605 50.3515 23.0542C49.9582 23.4479 49.4248 23.669 48.8687 23.669H38.3839C37.8278 23.669 37.2944 23.4479 36.9012 23.0542C36.5079 22.6605 36.287 22.1266 36.287 21.5698C36.287 21.0131 36.5079 20.4792 36.9012 20.0855C37.2944 19.6918 37.8278 19.4707 38.3839 19.4707H48.8687C49.4248 19.4707 49.9582 19.6918 50.3515 20.0855C50.7447 20.4792 50.9656 21.0131 50.9656 21.5698ZM50.9656 29.9665C50.9656 30.5233 50.7447 31.0572 50.3515 31.4509C49.9582 31.8445 49.4248 32.0657 48.8687 32.0657H38.3839C37.8278 32.0657 37.2944 31.8445 36.9012 31.4509C36.5079 31.0572 36.287 30.5233 36.287 29.9665C36.287 29.4098 36.5079 28.8759 36.9012 28.4822C37.2944 28.0885 37.8278 27.8674 38.3839 27.8674H48.8687C49.4248 27.8674 49.9582 28.0885 50.3515 28.4822C50.7447 28.8759 50.9656 29.4098 50.9656 29.9665Z' fill='hsl(169, 100%, 41%)'/%3E%3C/svg%3E%0A");
background-position: 125% 200%;
background-repeat: no-repeat;
background-size: 60% auto
}
.feature-cards>:first-of-type a {
color: #0a5748
}
.feature-cards>:nth-of-type(2) a {
color: #875812
}
.feature-cards>:nth-of-type(3) a {
color: #791133
}
.feature-cards>:nth-of-type(4) a {
color: #155d74
}<section class="section">
<div class="container flow">
<div class="offset-grid | feature-cards">
<div class="card | bg-brand-accent-100">
<h3 class="card__heading">Content Creation</h3>
<p>
High-quality content that resonates with your audience and drives
engagement.
</p>
<a href="#">Try now</a>
</div>
<div class="card | bg-yellow-300">
<h3 class="card__heading">Targeted Advertising</h3>
<p>
Reach your ideal customers with precision through our targeted
advertising campaigns.
</p>
<a href="#">Try now</a>
</div>
<div class="card | bg-pink-300">
<h3 class="card__heading">Social Media</h3>
<p>
Let us handle your social media presence and engage with your
audience on a personal level.
</p>
<a href="#">Try now</a>
</div>
<div class="card | bg-cyan-300">
<h3 class="card__heading">Analytics</h3>
<p>
Stay on top of your campaign’s performance with our detailed
analytics and reporting.
</p>
<a href="#">Try now</a>
</div>
</div>
</div>
</section>您可以使用
background-position: right -20% bottom 0;.section {
padding-block: 5rem
}
.container {
--padding: 2rem;
--max-width: 70rem;
margin-inline: auto;
width: min(100% - var(--padding), var(--max-width))
}
.flow>:where(:not(:first-child)) {
margin-top: var(--flow-spacer, 1rem)
}
.bg-brand-accent-100 {
background-color: #9ffeeb
}
.bg-yellow-300 {
background-color: #ffe2b8
}
.bg-pink-300 {
background-color: #f7b5cb
}
.bg-cyan-300 {
background-color: #9fe8fe
}
.card {
border-radius: 1rem;
box-shadow: none;
display: grid;
gap: .5rem;
line-height: 1.7;
padding: 1.5rem
}
.card,
.card__heading {
color: #404040;
font-family: system-ui
}
.card__heading {
font-size: 2rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1.1;
text-transform: none
}
.offset-grid {
display: grid;
gap: 1.5rem
}
@media screen and (min-width:45em) {
.offset-grid {
grid-template-columns: repeat(3, 1fr)
}
.offset-grid>:nth-child(4n+2),
.offset-grid>:nth-child(4n+3) {
grid-column: span 2
}
}
.offset-grid p {
max-width: 32ch
}
.offset-grid a {
text-decoration: underline
}
.feature-cards>:first-of-type {
background-image: url("data:image/svg+xml,%3Csvg width='60' height='51' viewBox='0 0 60 51' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M55.1596 0.578125H38.3839C36.7562 0.578125 35.1509 0.957499 33.695 1.6862C32.2391 2.41491 30.9727 3.47292 29.9961 4.77647C29.0195 3.47292 27.7531 2.41491 26.2972 1.6862C24.8414 0.957499 23.236 0.578125 21.6083 0.578125H4.8327C3.72041 0.578125 2.65367 1.02045 1.86716 1.80779C1.08065 2.59513 0.638794 3.663 0.638794 4.77647V38.3632C0.638794 39.4767 1.08065 40.5446 1.86716 41.3319C2.65367 42.1192 3.72041 42.5616 4.8327 42.5616H21.6083C23.2768 42.5616 24.8769 43.225 26.0566 44.4061C27.2364 45.5871 27.8992 47.1889 27.8992 48.8591C27.8992 49.4158 28.1201 49.9497 28.5134 50.3434C28.9066 50.7371 29.44 50.9583 29.9961 50.9583C30.5523 50.9583 31.0856 50.7371 31.4789 50.3434C31.8722 49.9497 32.0931 49.4158 32.0931 48.8591C32.0931 47.1889 32.7559 45.5871 33.9356 44.4061C35.1154 43.225 36.7155 42.5616 38.3839 42.5616H55.1596C56.2718 42.5616 57.3386 42.1192 58.1251 41.3319C58.9116 40.5446 59.3535 39.4767 59.3535 38.3632V4.77647C59.3535 3.663 58.9116 2.59513 58.1251 1.80779C57.3386 1.02045 56.2718 0.578125 55.1596 0.578125ZM21.6083 38.3632H4.8327V4.77647H21.6083C23.2768 4.77647 24.8769 5.43995 26.0566 6.62097C27.2364 7.80198 27.8992 9.40378 27.8992 11.074V40.4624C26.086 39.0966 23.8775 38.3596 21.6083 38.3632ZM55.1596 38.3632H38.3839C36.1148 38.3596 33.9062 39.0966 32.0931 40.4624V11.074C32.0931 9.40378 32.7559 7.80198 33.9356 6.62097C35.1154 5.43995 36.7155 4.77647 38.3839 4.77647H55.1596V38.3632ZM38.3839 11.074H48.8687C49.4248 11.074 49.9582 11.2951 50.3515 11.6888C50.7447 12.0825 50.9656 12.6164 50.9656 13.1732C50.9656 13.7299 50.7447 14.2638 50.3515 14.6575C49.9582 15.0512 49.4248 15.2723 48.8687 15.2723H38.3839C37.8278 15.2723 37.2944 15.0512 36.9012 14.6575C36.5079 14.2638 36.287 13.7299 36.287 13.1732C36.287 12.6164 36.5079 12.0825 36.9012 11.6888C37.2944 11.2951 37.8278 11.074 38.3839 11.074ZM50.9656 21.5698C50.9656 22.1266 50.7447 22.6605 50.3515 23.0542C49.9582 23.4479 49.4248 23.669 48.8687 23.669H38.3839C37.8278 23.669 37.2944 23.4479 36.9012 23.0542C36.5079 22.6605 36.287 22.1266 36.287 21.5698C36.287 21.0131 36.5079 20.4792 36.9012 20.0855C37.2944 19.6918 37.8278 19.4707 38.3839 19.4707H48.8687C49.4248 19.4707 49.9582 19.6918 50.3515 20.0855C50.7447 20.4792 50.9656 21.0131 50.9656 21.5698ZM50.9656 29.9665C50.9656 30.5233 50.7447 31.0572 50.3515 31.4509C49.9582 31.8445 49.4248 32.0657 48.8687 32.0657H38.3839C37.8278 32.0657 37.2944 31.8445 36.9012 31.4509C36.5079 31.0572 36.287 30.5233 36.287 29.9665C36.287 29.4098 36.5079 28.8759 36.9012 28.4822C37.2944 28.0885 37.8278 27.8674 38.3839 27.8674H48.8687C49.4248 27.8674 49.9582 28.0885 50.3515 28.4822C50.7447 28.8759 50.9656 29.4098 50.9656 29.9665Z' fill='hsl(169, 100%, 41%)'/%3E%3C/svg%3E%0A");
background-position: right -20% bottom 0;
background-repeat: no-repeat;
background-size: 60% auto
}
.feature-cards>:first-of-type a {
color: #0a5748
}
.feature-cards>:nth-of-type(2) a {
color: #875812
}
.feature-cards>:nth-of-type(3) a {
color: #791133
}
.feature-cards>:nth-of-type(4) a {
color: #155d74
}<section class="section">
<div class="container flow">
<div class="offset-grid | feature-cards">
<div class="card | bg-brand-accent-100">
<h3 class="card__heading">Content Creation</h3>
<p>
High-quality content that resonates with your audience and drives
engagement.
</p>
<a href="#">Try now</a>
</div>
<div class="card | bg-yellow-300">
<h3 class="card__heading">Targeted Advertising</h3>
<p>
Reach your ideal customers with precision through our targeted
advertising campaigns.
</p>
<a href="#">Try now</a>
</div>
<div class="card | bg-pink-300">
<h3 class="card__heading">Social Media</h3>
<p>
Let us handle your social media presence and engage with your
audience on a personal level.
</p>
<a href="#">Try now</a>
</div>
<div class="card | bg-cyan-300">
<h3 class="card__heading">Analytics</h3>
<p>
Stay on top of your campaign’s performance with our detailed
analytics and reporting.
</p>
<a href="#">Try now</a>
</div>
</div>
</div>
</section>