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

Question

我在设计ionic 4移动应用程序布局时遇到了很多问题。我花了一段时间才找到如何为应用程序设置背景图像，但是现在无论在哪里放置离子项目标签，我都会得到一个白色矩形。香港专业教育学院试图设置离子项目{背景：透明重要！}（在页面scss中），但它不起作用。我是离子的完整初学者！

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>

Answer 1

您应该尝试使用Shadow DOM变量来实现这一目标吗？

使用这些变量可以自定义

离子组件的样式。

  

获取有关离子项目here的更多信息

以下代码如下：

ion-item {
  // background-color: transparent !important; // to remove
  --background: none;
  opacity:1;
}

  

More information on Shadow DOM

您总是可以在每个组件的文档的页面结尾处找到此变量