離子頭內圖像的大小

Question

我在我的 ion-header 上放了一個背景圖像，但圖像似乎在縮放

在第一張圖片中是原樣，在第二張圖片中我希望它是

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

我嘗試了 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為空，因為先前的重要

你應該使用background-image:url(../img/bg_header_menu.png)而不是background

請參閱下面的片段示例：

 .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; }

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

或者你可以使用

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

如果您想在一種樣式中使用所有背景屬性

Answer 2

為離子工具欄分配背景大小這對我有用

    ion-toolbar {
    --background: url(title-bar.png) no-repeat center / cover;
   }

背景大小：覆蓋 CSS 屬性不適用於 ion-toolbar