如何从 ionic 4 中的离子项目中删除白色背景？

Posted 2023-03-13

【中文标题】如何从 ionic 4 中的离子项目中删除白色背景？

【英文标题】：How do I remove white background from ion-items in ionic 4?

【发布时间】：2019-08-07 15:11:26

【问题描述】：

我在为我的 ionic 4 移动应用布局设置样式时遇到了很多问题。我花了一段时间才知道如何为应用程序设置背景图像，但现在我在放置 ion-item 标签的地方得到了一个白色矩形。我尝试设置 ion-item 背景：透明重要！（在页面 scss 中）但它不起作用。我是 ionic 的初学者！

register.page.scss

:host  ion-content 
--background:none;
background: url('../../assets/imgs/hoghi/bg.jpg')  no-repeat 100% 100%;
background-size: cover;
background-position: center center;

ion-item 
  background-color: transparent !important;
  background: transparent !important;
  opacity:1;
//end of item//end of content//end of :host

register.page.html

<ion-content>
  <ion-item>
    <ion-label position="floating">Name</ion-label>
    <ion-input></ion-input> 
  </ion-item>
</ion-content>

【问题讨论】：

是的，我知道 '' 在我的 register.page.scss 末尾被注释我在格式化它们以适应代码块时遇到问题，呵呵.. 任何帮助都会得到赞赏！跨度>

【参考方案1】：

您应该尝试使用 Shadow DOM 变量来实现。

Ionic 组件的样式可使用这些变量进行自定义。

获取有关 ion-item 的更多信息here

按照您的代码：

ion-item 
  --background: none;
  opacity:1;

More information on Shadow DOM

您始终可以在每个组件文档的页面末尾找到这些变量

【讨论】：

这把戏做得很好。我一定会查看你链接的页面，因为我读到 ionic 4 与以前的 ionic 版本有不同的样式规则。非常有帮助。谢谢先生。