离子标题内

Question

我将背景图像放在我的离子标题上，但图像似乎在缩放

在第一张图片中它是原样的，在第二张图片中我希望它是

.background-header {
    background: url(../img/bg_header_menu.png) !important;
    background-size: cover;
}

我尝试了背景大小：封面，100％和更多的东西，但没有成功

由于

使用html编辑：

<ion-header-bar class="background-header">
</ion-header-bar>

对于糟糕的解释，很抱歉，第一张图片似乎是缩放的。这样，第二张图像中的笔划看起来不一样。

图像尺寸为1366x177，它不是重复图像

Answer 1

好。使用

background: url(../img/bg_header_menu.png) !important;将使所有默认的背景属性变得重要（图像，位置，重复，附件等），因此您编写的下一个内容background-size:cover因为之前的重要内容而为空< / p>

您应该使用background-image:url(../img/bg_header_menu.png)代替background

请参阅下面的代码段示例：

＆＃13;

＆＃13;

.background-header {
    background-image: url(http://placehold.it/1366x177) ;
    background-size: cover;
    background-repeat:no-repeat;
    background-position:center center;
    width:100%;
    height:177px;
    float:left;

}

＆＃13;

<ion-header-bar class="background-header">

</ion-header-bar>

＆＃13;

＆＃13;

＆＃13;

或者你可以使用

 background:{url(http://placehold.it/1366x177) no-repeat scroll center center /cover transparent  }

如果要在一种样式中使用所有背景属性