如何解决IONIC 5离子头对离子含量的背景图像不透明
我刚刚使用ionic 5创建了一个空白项目,并为内容添加了背景图片。 之后,我修改了page.page.scss文件以使标题透明,但是它不起作用。
如果我只是选择离子含量的背景色,那行得通。
请帮助我。
这是我的环境:
离子:
Ionic CLI : 6.11.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.3.1
@angular-devkit/build-angular : 0.901.12
@angular-devkit/schematics : 9.1.12
@angular/cli : 9.1.12
@ionic/angular-toolkit : 2.3.0
电容器:
Capacitor CLI : 2.4.0
@capacitor/core : 2.4.0
实用程序:
cordova-res : not installed
native-run : not installed
系统:
NodeJS : v14.7.0 (/usr/local/bin/node)
npm : 6.14.7
OS : macOS Catalina
这是页面SCSS代码:
// ion-content {--background: #f1453d !important;
// --color : #f1453d !important }
ion-content {
--background : none;
border:none;
background-image: url(../../assets/imgs/bckgrnd.jpg) ;
background-repeat: no-repeat;
background-attachment: scroll;
background-size:cover;
background-position:center bottom;
}
ion-toolbar {
--background: transparent !important;
--ion-color-base: transparent !important;
--border-color: transparent;
--background-color: transparent !important;
}
}
HTML代码:
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<div id="container">
<strong>Ready to create an app?</strong>
<p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
</div>
</ion-content>
图像中的结果:
header white but not transparent...
因此,如果有人已经遇到了这个问题或解决方案,它将使我和我的应用程序免于许多麻烦。
谢谢你 再见
解决方法
根据离子文档(https://ionicframework.com/docs/api/header),要使标题透明,您需要将 mode 和 translucent 属性设置为 ios strong>和 true 。
例如:
<ion-header mode="ios" translucent="true">
<ion-toolbar>
<ion-title size="large">My Navigation Bar</ion-title>
</ion-toolbar>
</ion-header>
文档还提到,如果设备不支持backdrop-filter
,则此操作将无效。您也可以取消半透明的html绑定,除非您使用布尔值true的变量“ true”。
如果这不起作用,请尝试摆脱ion-header
。
感谢您的帮助。 我只是成功地使标题变为半透明但不透明..arghh
在CSS文件中,我更改了内容的--background功能,并在ion-header标签中添加了mode =“ ios”属性:
ion-content {
--background:url(../../assets/imgs/bckgrnd.jpg) no-repeat 100% center/cover;
border:none;
//background-image: url(../../assets/imgs/bckgrnd.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-size:cover;
background-position:center bottom;
}
<ion-header translucent="true" mode="ios">
<ion-toolbar>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
</ion-header>
我不知道我做错了什么,也不知道ionic 5是否失去了此功能...那将很奇怪,而且非常糟糕... 这就是为什么我认为我做错了...
这是图片: Header translucent,not transparent
再次感谢您!
,按照以下步骤使标题透明
在variable.scss中添加
:root {
--ion-toolbar-background:transparent;
}
HTML代码
<ion-header class="ion-no-border">
<ion-toolbar>
</ion-toolbar>
</ion-header>
<ion-content >
<div >
<ion-img class="bgr" src="../../../assets/imgs/background_doodle.png">
</ion-img>
</div>
</ion-content>
在.scss中添加
.bgr {
height: 100%;
width: 100%;
top: 0;
position: fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
object-fit: cover;
}
::-webkit-scrollbar,*::-webkit-scrollbar {
display: none;
}
,
这是一个非常简单的“单线” CSS解决方案,用于向离子4+内容元素添加透明(背景)图像,而不会遇到诸如文本之类的透明子元素的麻烦。
ion-content {
--background: linear-gradient(rgba(255,255,0.8),rgba(255,0.8)),url("assets/background_small.png") no-repeat center center / cover;
}
- -background:-操纵Web组件的CSS(阴影DOM)
- linear-gradient(...):为图像添加透明度(实际示例中为0.2!)
- 无重复中心/封面:无休止地拉伸图像
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。