I have an image with a slight black linear gradient over it to improve readablitiy
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("./images/slideshow/2.jpg");
However I am using a slideshow that only accepts divs with inline backgroundImage properties
<div
className="slideshow-image"
style={{ backgroundImage: `url(${slideshow2})`, repeat: "no-repeat" }}
>
The trouble is I cannot add the linear gradient that the image had before with inline styling.
//attempt 1
const backgroundStyle = {
backgroundImage: `url(${slideshow1})`,
linearGradient: "(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))",
};
// attempt 2
style={{
linearGradient: "(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))",
backgroundImage: `url(${slideshow1})`,
repeat: "no-repeat",
}}
//attempt 3
.slideshow-image {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
Neither of these display anything over the image. What can I try next to accomplish this?
Related
I need to write the following CSS value as a string in a makeStyles function in Material UI, how can it be done?
background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)),
url(../assets/pexels-pixabay-41949.jpg),
i tried it this way but obviosuly is incorrect
background: 'linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)),
url(../assets/pexels-pixabay-41949.jpg)',
You can use Template literals to get this work. Move the URL into a variable and then form the actual CSS property.
const url = "https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80";
const useStyles = makeStyles(() => ({
boxBackground: {
background: `linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)),url(${url
})`,
},
}));
Here is the working CodeSandbox link.
I am trying to put together some basic reactive forms.
The problem we have is that our compliance department is not going to let us go through because all of the contrasts for material form fields are too transparent/light.
I am looking for a way to darken up all of the form fields, outlines, disabled text etc.
I have been trying to make it global by going into my primary stylesheet. However I cannot seem to figure out how to override material in this way.
I have tried the following within the scss:
.mat-input-element:disabled .mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {
opacity: 1.0 !important;
}
.mat-input-element .mat-form-field-autofill-control .ng-tns-c161-25 .ng-untouched .ng-pristine .cdk-text-field-autofill-monitored {
opacity: 1.0 !important;
}
Or higher in the themes:
// Light Theme Text
$dark-text: #000000;
$dark-primary-text: rgba($dark-text, 1.0);
$dark-accent-text: rgba($dark-primary-text, 1.0);
$dark-disabled-text: rgba($dark-primary-text, 1.0);
$dark-dividers: rgba($dark-primary-text, 1.0);
$dark-focused: rgba($dark-primary-text, 1.0);
$mat-light-theme-foreground: ( base: black, divider: $dark-dividers, dividers: $dark-dividers, disabled: $dark-disabled-text, disabled-button: rgba($dark-text, 0.26), disabled-text: $dark-disabled-text, elevation: black, secondary-text: $dark-accent-text, hint-text: $dark-disabled-text, accent-text: $dark-accent-text, icon: $dark-accent-text, icons: $dark-accent-text, text: $dark-primary-text, slider-min: $dark-primary-text, slider-off: rgba($dark-text, 0.26), slider-off-active: $dark-disabled-text, );
// Dark Theme text
$light-text: #ffffff;
$light-primary-text: $light-text;
$light-accent-text: rgba($light-primary-text, 1.0);
$light-disabled-text: rgba($light-primary-text, 1.0);
$light-dividers: rgba($light-primary-text, 1.0);
$light-focused: rgba($light-primary-text, 1.0);
$mat-dark-theme-foreground: ( base: $light-text, divider: $light-dividers, dividers: $light-dividers, disabled: $light-disabled-text, disabled-button: rgba($light-text, 0.3), disabled-text: $light-disabled-text, elevation: black, hint-text: $light-disabled-text, secondary-text: $light-accent-text, accent-text: $light-accent-text, icon: $light-text, icons: $light-text, text: $light-text, slider-min: $light-text, slider-off: rgba($light-text, 0.3), slider-off-active: rgba($light-text, 0.3), );
Neither of these approaches seem to effect the project and components in any way.
Is there a method I can use to darken the contrast of all form fields globally? Without resorting to directives or having to include the same manual css to every component.css ?
Thanks much.
EDIT: I am trying to overcome this very transparent.
You should be able to override most of the mat-form-field rules to meet your requirements. Here are some examples you can add to your top level style sheet for the 'fill' appearance:
.mat-form-field-appearance-fill {
.mat-form-field-label {
color: rgba(0, 0, 0, 1) !important;
}
.mat-form-field-flex {
background-color: rgba(0, 0, 0, 0.08);
}
}
.mat-form-field-appearance-fill.mat-form-field-disabled {
.mat-form-field-label {
color: rgba(0, 0, 0, 0.8) !important;
}
.mat-form-field-flex {
background-color: rgba(0, 0, 0, 0.04);
}
}
https://stackblitz.com/edit/angular-a7hisy?file=src%2Fstyles.scss
For appearance="outline"
.mat-form-field-appearance-outline {
.mat-form-field-label {
color: rgba(0, 0, 0, 1) !important;
}
.mat-form-field-outline {
color: rgba(0, 0, 0, 0.4);
}
}
.mat-form-field-appearance-outline.mat-form-field-disabled {
.mat-form-field-label {
color: rgba(0, 0, 0, 0.8) !important;
}
.mat-form-field-outline {
color: rgba(0, 0, 0, 0.2);
}
}
https://stackblitz.com/edit/angular-jy3hjq?file=src%2Fapp%2Fform-field-appearance-example.html
I wanted to have a background overlay on my background image. I wanted to achieve something on this below:
Pls check my codesanbox also
Click here
image: {
backgroundImage:
"linear-gradient(0deg, rgba(255, 0, 150, 0.3), #06a303), url(http://lorempixel.com/800/600/nature/2)",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center"
},
Specify a sold gradient, black # about 50-60% opacity, with your background image under it. White text and some padding help the text pop.
backgroundImage:
"linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(http://lorempixel.com/800/600/nature/2)",
Code
const useStyles = makeStyles((theme) => ({
...
image: {
backgroundImage:
"linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(http://lorempixel.com/800/600/nature/2)",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
color: "white",
padding: "1rem"
},
...
}));
I am trying to test the border on an image using testcafe using getStyleProperty('border') and it always returns undefined. Other properties like box-shadow work fine.
HTML:
<img id="imgEdit" class="img-editable" [src]="imageUrl" style="border: 12px
solid rgb(0, 0, 0);" alt="editable image" />
const image = Selector('#imgEdit');
const imageBorder = await image.getStyleProperty('border');
imageBorder is always undefined.
border in CSS is considered a Shorthand property. This is the reason why you cannot find the border property.
If you console.log(image.style), you will see the actual border* CSS properties that represent the style="border: 12px
solid rgb(0, 0, 0);" in your HTML.
'border-bottom-color': 'rgb(0, 0, 0)',
'border-bottom-left-radius': '0px',
'border-bottom-right-radius': '0px',
'border-bottom-style': 'solid',
'border-bottom-width': '12px',
'border-collapse': 'separate',
'border-image-outset': '0px',
'border-image-repeat': 'stretch',
'border-image-slice': '100%',
'border-image-source': 'none',
'border-image-width': '1',
'border-left-color': 'rgb(0, 0, 0)',
'border-left-style': 'solid',
'border-left-width': '12px',
'border-right-color': 'rgb(0, 0, 0)',
'border-right-style': 'solid',
'border-right-width': '12px',
'border-top-color': 'rgb(0, 0, 0)',
'border-top-left-radius': '0px',
'border-top-right-radius': '0px',
'border-top-style': 'solid',
'border-top-width': '12px',
I am not sure which border property you want to test for, but here is a working example
image.getStyleProperty('border-bottom-color'); outputs rgb(0, 0, 0)
So i have something like this:
#color1: rgba(0, 0, 0, 0);
#color2: rgba(0, 0, 0, 0.7);
#start-view .start1 {
.imageGradientOverlay(#color1, #color2, "../images/start/start1.jpg");
}
variable for this is:
.imageGradientOverlay(#color1, #color2, #url-image) {
background-image:
linear-gradient(#color1, #color2),
url(#url-image);
background-image:
-webkit-linear-gradient(#color1, #color2),
url(#url-image);
}
and the compiled code looks like this:
#start-view .start1 {
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url("../../../images/start/start1.jpg");
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url("../../../images/start/start1.jpg");
}
The question is - Why is less when compiling adding two more ../../ ?
If i try to add this /images/start/start1.jpg the code is compiled fine but this is not what i need.
Looking at the LESS options, I believe you have rootpath set to add that prefix. So reset the rootpath and it should be fine.
You can test it here - LESS2CSS, just add that option.