我需要在页面的绝对左下角放置背景图案图像(使用position: absolute
),但是图像始终显示在底部上方。
这是左下角的外观:https://i.ibb.co/d5RkRdX/desktop-design-monthly2.jpg 相反,它是这样的:https://i.ibb.co/3r3jvBr/image.png
这是我的一些HTML和CSS代码-相关元素的类别为“ bg-bottom”:
<div class="row" id="pricing">
<div class="card">
<h2 class="card-title">Basic</h2>
<h1 class="row price-title">
<span>$</span>
<span class="price basic">19.99</span>
</h1>
<hr class="seperator" />
<p class="text">500 GB Storage</p>
<hr class="seperator" />
<p class="text">2 Users Allowed</p>
<hr class="seperator" />
<p class="text">Send up to 3 GB</p>
<hr class="seperator" />
<button class="btn">LEARN MORE</button>
</div>
<div class="card card-middle">
<h2 class="card-title">Professional</h2>
<h1 class="row price-title">
<span>$</span>
<span class="price professional">24.99</span>
</h1>
<hr class="seperator" />
<p class="text">1 TB Storage</p>
<hr class="seperator" />
<p class="text">5 Users Allowed</p>
<hr class="seperator" />
<p class="text">Send up to 10 GB</p>
<hr class="seperator" />
<button class="btn">LEARN MORE</button>
</div>
<div class="card">
<h2 class="card-title">Master</h2>
<h1 class="row price-title">
<span>$</span>
<span class="price master">39.99</span>
</h1>
<hr class="seperator" />
<p class="text">2 TB Storage</p>
<hr class="seperator" />
<p class="text">10 Users Allowed</p>
<hr class="seperator" />
<p class="text">Send up to 20 GB</p>
<hr class="seperator" />
<button class="btn">LEARN MORE</button>
</div>
</div>
<img class="bg-bottom" src="images/bg-bottom.svg" alt="bottom background" />
.bg-bottom {
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: 20%;
}