I'm trying to apply a transparent Linear Gradient on an image.
I'm using Angular 7.2.0, tns-core-modules 5.3.1
Html:
<Image src="https://mdn.mozillademos.org/files/15525/critters.png" class="imgGrad"></Image>
Css:
.imgGrad{
height:80;
width:150;
background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,1));
}
This code works fine with IOS but not with Android.
It's actually expected, iOS supports multiple layers so there will be one separate layer to hold the background gradient above the image. With Android, it's just the background, the background won't be visible when you have the image on top of it.
The solution is to use a separate view above image for gradient.
HTML
<GridLayout class="container">
<Image src="https://mdn.mozillademos.org/files/15525/critters.png"></Image>
<StackLayout class="gradient"></StackLayout>
</GridLayout>
CSS
.container {
height:80;
width:150;
}
.gradient {
background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,1));
}
Related
using Next 13 and Tailwind, i'm trying to render the some images of products from fakestoreapi on my e-commerce page, i want this images to have the same size so i'm using this code. But the images are not resizeing correctly.
this component only has one parent div with no properties.
<Image src={image} width={200} height={200} style={{ objectFit: "contain" }} />
do you know what could be the reason ? Let me know if i need to provide more info.
thankyou in advance
Setting height of your element via style attribute should override tailwind default.
<Image src={image} width={200} height={200} style={{ objectFit: "contain", height: "200px" }} />
How do you create a circular image using nextjs Image? I have found that the solution involving wrapping the image in divs with border radius and hidden overflow isn't working.
import Image from 'next/image'
<Image src={props.profilePictureURL} height={200} width={200} alt='IMG2'/>
Add this to your css file.
img {
border-radius: 50%;
}
Answer:
<Image src={props.profilePictureURL} className={styles.makeImageCircular} height={200} width={200} alt='IMG2'/>
where:
.makeImageCircular {
border-radius:50%;
}
*mistakenly set 50% to '50%' (within a string in CSS)
I have an image which I want to display in top half of my screen. I'm using flux like this.
<View style={{flex:0.5}}>
<Image
style={{width:null, height:null, flex:1, resizeMode:'stretch'}}
source={require('../../../Images/salad-congo.png')}>
</Image>
</View>
<View style={{flex:0.5, backgroundColor:'yellow'}}>
<Text>Hello</Text>
</View>
Problem:
The problem is my image does not fit for all screen sizes. If I'm opening my app in landscape mode the image is centered instead of covering whole width and height of upper half. In case I use 'resizeMode='stretch'' my whole image is destroyed in pixels, and becomes un viewable. How can I make my image appear big for large screens, and small for small screens obviously covering the whole screen. Is there something I need to do with my image's resolutions? Or provide multiple images? If yes then how to handle them for both android and IOS
Import Dimensions From react native and then use it to set the size of your image
import {Dimensions} from 'react-native'
const SCREEN_WIDTH = Dimensions.get("window").width;
const logo = require("logo.png");
in the return of render:
<Image source={logo} style={styles.logo} />
const styles = StyleSheet.create({
logo: {
height: SCREEN_WIDTH * 0.65,
width: SCREEN_WIDTH * 0.65,
marginLeft: SCREEN_WIDTH * 0.2
}})
So I solved the issue by creating a single large image of 2056x2056, and then by using Flex properly to obtain the desired result. Tested the result on a couple of phones and tablets. Working Fine.
<View style={{flex:1}}>
<View style={{flex:0.6, alignItems:'stretch'}}>
<Image style={{flex:1, width: null, height: null }}
source={require('../../../Images/salad-congo2056x2056.png')}/>
</View>
<View style={{flex:0.1, backgroundColor:'#ffffff'}}>
// Intentional gap
</View>
<View style={{flex:0.3, backgroundColor:'red'}}>
// Anything here
</View>
</View>
I use Light Gallery (http://sachinchoolur.github.io/lightGallery) for my website and want to make some customization on it.
I want to blur the background image of each and every image items that open in the gallery by using those images in their background-image (in CSS).
Well, Light gallery use much more Java Script references from html tag attributes to view values in the gallery which it’s a little complicated for one like who doesn’t predominate on JS.
The structure of gallery items looks like this:
<ul id="lightgallery">
<li>
<a href="">
<img src="">
</a>
</li>
</ul>
If I blur background-image of (li) tag in CSS, it effects the thumbnails (not gallery thumbnail).
I found the main gallery container class (.lg-backdrop) which can blur the background of my light gallery, but it’s a “class” and the effects applies to all items which is defined by this class.
and its my CSS:
.lg-backdrop:before {
content: "";
position: fixed;
left: 0;
right: 0;
z-index: -1;
display: block;
background-image: url(contents/images/canada/canada_exh_1.jpg);
width:100%;
height:100%;
-webkit-filter: blur(50px);
-moz-filter: blur(50px);
-o-filter: blur(50px);
-ms-filter: blur(50px);
filter: blur(50px);
}
Here is I am asking if there is a way to blur the background of each image item by their own image?
The CSS filter property provides access to effects like blur or color shifting on an element’s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border.
The Syntax is :
.filter-me {
filter: <filter-function> [<filter-function>]* | none
}
It's a known bug that -moz-border-radius doesnt work on images in firefox. What's a way to get this functionality without resorting to putting the image as a background on a rounded div?
In current Firefox you can use SVG filters. Have an SVG file clip.svg like this:
<svg:svg height="0">
<svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
<svg:rect x="0" y="0" rx="0.05" ry="0.05" width="1" height="1"/>
</svg:clipPath>
</svg:svg>
And apply it in CSS like this:
.target { clip-path: url(clip.svg#c1); }