离子头内图像的大小答案

【问题标题】：Size of the image inside the ion-header离子头内图像的大小
【发布时间】：2017-05-23 21:41:51
【问题描述】：

我在 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，不是重复图片

【问题讨论】：

看起来你想去掉切换按钮？
好吧。这一切都取决于 html 结构。你能分享一下吗？ . （.background-header 的 HTML 以及任何相关的内容）
也制作sn-p。
这是一个可重复的模式吗？只需删除 background-size 并让它像默认情况下一样重复。另外，除非确实需要，否则我会删除 !important 并将 background 更改为 background-image

标签： html css ionic-framework sass

【解决方案1】：

好吧。使用

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

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

参见下面的 sn-p 示例：

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

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

【讨论】：

【解决方案2】：

为离子工具栏分配背景大小这对我有用

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

背景尺寸：覆盖 CSS 属性不适用于 ion-toolbar

【讨论】：