离子头内图像的大小

Posted 2023-03-06

【中文标题】离子头内图像的大小

【英文标题】：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

【参考方案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