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

Question

我在设计 ionic 4 移动应用程序布局时遇到了很多问题。我花了一段时间才弄清楚如何为应用程序设置背景图像，但现在我在放置 ion-item 标签的任何地方都得到了一个白色矩形。我尝试设置离子项目 {background: transparent important!} （在页面 scss 中）但它不起作用。我是一个完整的 ionic 初学者！

注册页面.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

注册页面.html

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

Answer 1

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

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

在此处获取有关 ion-item 的更多信息

遵循您的代码：

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

更多关于 Shadow DOM 的信息

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