I have an Ion Content, I need to put a background image there with 50% Opacity.
My welcome component html
<ion-content>
<ion-grid>
<ion-row>
...
My welcome component scss
ion-content
{
--background: url(splash1.png) no-repeat center center / cover;
--background-opacity: 0.5;
}
The Background Image is shown, but there is no opacity. How I can fix it? I user Ionic v6 with Angular
use css shadow part background:
ion-content
{
--background: url(splash1.png) no-repeat center center / cover;
}
ion-content::part(background)
{
opacity: 0.5;
}
Related
I want my modal to have a content (image), and a transparent background, but I can't achieve the transparent background, I will appreciate if you can help me.
Thank you very much!
Ionic CLI: 6.19.0
Ionic Framework: #ionic/angular 6.0.4
global.scss
.modal-answer .modal-wrapper {
--background: transparent !important;
margin: 0 auto;
height: 40%;
top: 30%;
width: 70%;
display: block;
}
game.ts
const modal = await this.modalController.create({
component: ModalAnswerPage,
cssClass: 'modal-answer',
componentProps: {
answe: this.ok_bad_time,
back_g: this.color_backg_modal_ answer'
}
});
return await modal.present().then(_ => {
});
modal-answer.page.scss
ion-content{
--background: transparent;
}
Remove your ion-content from you modal html. It inherit the background color from the component where you open the modal.
in you global.css :
ion-modal {
--background: transparent !important;
}
If this approach doesn't work, then instead you can add opacity to Modal parent element. For example :-
Modal component code :-
<div padding class="mainContent">
<div no-margin margin-top class="feedbackCard">
</div>
</div>
Here mainContent is complete page (transparent bg) and feedbackCard is the subpart (having white bg) and below is the CSS for above component
.mainContent {
flex: 1;
background-color: rgba(0, 0, 0, 0.3) !important;
justify-content: center;
align-content: center;
align-items: center;
display: flex;
}
.feedbackCard {
width: 100%;
border-radius: 4px;
background-color: white;
}
And you can open Modal using below code.
const modal = await this.modalCtrl.create({FeedbackComponent, 'backTransparent', {}});
modal.present();
global.scss
.backTransparent {
--background: transparent !important;
}
I use svg-icons in an app and the question is if it is necessary to put icons in different colors there or if I can set a color by code. Here is my approach:
app.scss:
ion-icon {
&[class*="custom-"] {
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
background: currentColor;
width: 1em;
height: 1em;
}
&[class*="custom-mobile"] {
background: url(../assets/mobile.svg);
}
}
view:
<ion-item>
<ion-icon name="custom-mobile"></ion-icon>
</ion-item>
I change the color of background in the class-part but no effect on view.
I'm using the following code to resize the images... Basically, I would be swapping out the image as the screen sizes shrinks or gets wider. I was wondering if this is the right approach and what size images would I have to use for each breakpoint in the media queries?
Here is a snippet of my CSS code for the background image. BTW... I'm using "no-gutters" in bootstrap 4 to layout the site. But when the images get smaller they just show parts of the background. I want to either create a new image (resized) or have it shrink to display the proper background.
Any ideas of what size to resize the images to or how to shrink/expand them? The default starting image is 2000x1333px.
.landpage-img {
background: url(../img/bg-neon-01-2000x1333.jpg) no-repeat center center fixed;
height: 1333px;
}
#media only screen and (max-width: 1024px) and (orientation:landscape) {
.landpage-img {
background: url(../img/bg-neon-01-2000x1333.jpg) 50% 0 no-repeat center center fixed !important;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
#media only screen and (min-width: 768px) and (max-width: 991px) {
.landpage-img {
background: url('../img/bg-neon-01-2000x1333.jpg') 50% 80% no-repeat fixed !important;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
#media only screen and (min-width: 0px) and (max-width: 767px) {
.landpage-img {
background: url('../img/bg-neon-01-2000x1333.jpg') 50% 80% no-repeat fixed !important;
background-size: auto !important;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
I'm using Ionic2 and I want to make image and set an icon above the image when clicking the image I will upload image :
this is my code:
img {
-o-object-fit: cover;
object-fit: cover;
border-radius: 50%;
opacity: 0.6;
}
<img src="http://cdn.business2community.com/wp-content/uploads/2014/04/profile-picture.jpg"/><br/>
<button clear id="chgImg">Change Image</button><br/>
I want to set :
<ion-icon name="camera"></ion-icon>
above the image and in the center of it, what should I do?
Add a container to the image and button
.container{
position: relative;
}
Add the icon inside container
And set it's position to absolute.
I have a mobile website, which currently displays a timetable. The non-mobile site however also has a iFrame with google maps inside it, to display multiple vehicles being tracked.
For the mobile site, I want only the timetable to display in portrait and only the iframe to display in landscape.
I've seen this Can I trigger a CSS event in mobile safari upon iphone orientation change? , but I struggle to see how I can apply this to my query.
This is the CSS for the iFrame:
.map {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #fff;
color: #000;
width: 600px;
height: 500px;
margin-left: 20px;
margin-right: auto;
overflow: hidden;
-moz-box-shadow: inset 0 0 5px #888;
-webkit-box-shadow: inset 0 0 5px #888;
box-shadow: inner 0 0 5px #888;
float: left;
}
use #media
#media all and (orientation:portrait) { … }
#media all and (orientation:landscape) { … }
Don't abuse javascript when CSS can do it.
orientation
First you will need to assign ID to your timetable container and iFrame. Then, use the javascript below to hide or display it. I will assume that your iFrame id is 'map' and your timetable container is 'timetable'
<script type="text/javascript">
var timetable = document.getElementById('timetable');
var map = document.getElementById('map').
window.onorientationchange = function() {
switch(window.orientation) {
case 0: // Portrait
case 180: // Upside-down Portrait
// Javascript to setup Portrait view
timetable.style.display = 'none';
map.style.display = 'block';
break;
case -90: // Landscape: turned 90 degrees counter-clockwise
case 90: // Landscape: turned 90 degrees clockwise
// Javascript to steup Landscape view
timetable.style.display = 'none';
map.style.display = 'block';
break;
}
}
</script>