html - 展开背景照片整个宽度的卡片

Question

我似乎无法消除背景照片的空白区域。以下是我尝试过的所有 .css 样式:

    .prflBg {
    ion-card-content{
    background-image: url('../assets/img/headerBg.png');
    background-size: 320px 158px;
    background-repeat: no-repeat;
    width: 100% !important;
    overflow: visible !important;
    margin-left: -10px !important;
    padding-top: 5px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    }[![enter image description here][1]][1]

Answer 1

“背景大小”属性决定了图像的大小。如果不知道背景图像的大小或您尝试将其放入的容器，就很难知道哪里出了问题。

然而，background-size 属性是非常标准的。第一个数字决定图像的宽度，第二个数字决定图像的高度。还有"word" choices你可以用它做各种事情。

在您的情况下，我建议使用“background-size:cover”，因为根据 w3Schools，这是 cover 值的作用:

Cover will resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges