【问题标题】:Changing background of ion-content ionic 4 not the inside elements改变离子含量离子4的背景而不是内部元素
【发布时间】:2025-12-12 18:10:01
【问题描述】:

我知道已经有关于在 ionic 4 中设置内容/页面背景的类似问题,但我确实设法设置了它,但我所有的实验也将 ion-card 背景设置为内容的颜色,这并不是真正的我想。我还尝试使用 ids 和 classes 将背景颜色设置为 ion-grid elem,结果相同。

当我尝试仅设置 body 的样式时,内容的背景完全不受影响。

我可能可以为内容中的其他元素设置样式,但我更想知道,我在设计使用离子元素的方式中缺少什么,以及如何实现页面背景的颜色,而不是内容中的元素。

ion-content {
    --ion-background-color: yellow;
}

【问题讨论】:

    标签: ionic-framework


    【解决方案1】:

    根据我的实验发现,--ion-background-color: 为离子组件设置了全局背景默认值(如果未设置,则默认为 #fff)。要仅针对离子含量,最好将其设置为ion-content {--background : #f4a942;}。您可以像ion-grid {background: #aaa;} 那样设置离子网格背景。离子卡的问题在于,默认情况下它的背景设置为var(--ion-item-background,transparent),因此如果设置了一个,它将使用ion-item-background,否则它将是透明的,您可以通过使用@声明背景来忽略所有这些987654325@点赞ion-card{--background: #aaa !important;}.

    如果您想知道组件是否需要 --background 或只是 background,我必须检查 ionic 文档以查看其 CSS 自定义属性中是否有 --background:/

    【讨论】: