I have the following CSS meant to display a background image with all browsers:
.single-product.postid-92613 .site-content, .single-product.postid-92613 header#masthead, .single-product.postid-92613 .site-footer, .single-product.postid-92613 .sfb-footer-bar {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, .3)), url("/wp-content/uploads/2020/08/pic.jpg")!important;
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .3)), url("/wp-content/uploads/2020/08/pic.jpg")!important;
background-image: -o-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .3)), url("/wp-content/uploads/2020/08/pic.jpg")!important;
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .3)), url("/wp-content/uploads/2020/08/pic.jpg")!important;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .1)), to(rgba(0, 0, 0, .3))), url("/wp-content/uploads/2020/08/pic.jpg")!important;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .3)), url("/wp-content/uploads/2020/08/pic.jpg")!important;
background-attachment: fixed!important;
background-size: cover!important;
background-position: 100% 0!important;}
CSS lint gives a warning that background-image is being called several times. Is there any way to prevent that?
Also add this in CSS:
background-repeat:no-repeat;
Related
I am trying to apply styles for first and last elements which includes class .swiper-slide-visible
But I apply styles for all elements which do not include this class:
.swiper-slide-visible:first-child {
mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
}
.swiper-slide-visible:last-child {
mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
}
Styles are applied to 2nd element too.
.swiper-wrapper div.swiper-slide-visible:first-child apply styles to every div.swiper-slide
I have a right code for first element
.swiper-wrapper > div.swiper-slide-visible
.swiper-wrapper > div.swiper-slide-visible ~ div.swiper-slide-visible
But now I'm working on the last element. Need to find last element!
I have this a scrollable component:
<div>
<div className="scrolling-component">...</div>
<div className="button">...</div>
</div>
And in the scss file I have:
.scrolling-component {
background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
height: 100px;
}
But I checked the dev tools and it looks like there's something wrong with the syntax, I've been looking at it for a while now and have yet to figure out what exactly is wrong with it, I was thinking perhaps it's the radial-gradient, help is appreciated!
I tried your code and dev tools are showing error 'Invalid property value' in background. you forgot to add 'at' in radial gradient:
working gradient:
linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
I'm currently trying to create a linear-gradient using CSS.
The gradient should start all black on the left side and end with a lowered opacity in the middle. Now start with a lower opacity and end with normal opacity again on the right side.
My problem is the following:
I only get a good result using two different div elements.
Example:
<div style="float: left; background: linear-gradient(to right, rgba(0, 0, 0, 0.69) 0%, rgba(0, 0, 0, 0) 100%);"></div>
<div style="float: right; background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.69) 99%, rgba(0, 0, 0, 0.69) 100%);"></div>
My Question:
How could I create the linear-gradient in one div element?
Screenshot outcome:
In your left div, change the 100% to be 50% and then copy the first rgba as your 100% state:
<div style="background: linear-gradient(to right, rgba(0, 0, 0, 0.69) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.69) 100%); height:20px;"></div>
You can consider multiple background:
body {
margin:0;
height:100vh;
background:
linear-gradient(to right, rgba(0, 0, 0, 0.69), rgba(0, 0, 0, 0)),
linear-gradient(to left, rgba(0, 0, 0, 0.69), rgba(0, 0, 0, 0));
background-repeat:no-repeat;
background-size:50% 100%;
background-position:left,right;
}
I have this line of code
background:linear-gradient(341deg, #8a8a8a 0%, #8a8a8a 31.9%, #000 32.1%, #000 100%);
As you can see its half grey half black. Is there a way to make the grey part of it transparant, so then it would be half transparant half black..
Thanks in advance,
Kevin
You can use rgba() to achieve this where the first 3 parameters are the color you want (in your case, 138, 138, 138) and the last parameter is the opacity (in your case this will be 0)
To give you an example, your code will turn into this:
background:linear-gradient(341deg, rgba(138,138,138,0) 0%, rgba(138,138,138,0) 31.9%, #000 32.1%, #000 100%);
In this fiddle you can see it in action
Hope this helps!
Try this
background: linear-gradient(341deg, rgba(0, 0, 0, .33) 0%, rgba(0, 0, 0, .5) 31.9%, rgba(0, 0, 0, 1) 31.9%, rgba(0, 0, 0, 1) 100%);
Check the result
.original {
background:linear-gradient(341deg, #8a8a8a 0%, #8a8a8a 31.9%, #000 32.1%, #000 100%);
}
.advice {
background: linear-gradient(341deg, rgba(0, 0, 0, .33) 0%, rgba(0, 0, 0, .5) 31.9%, rgba(0, 0, 0, 1) 31.9%, rgba(0, 0, 0, 1) 100%);
}
.original,
.advice,
.tree{
height: 400px;
width: 400px;
}
.tree {
background-image: url('http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg');
}
<div class="tree"></div>
<div class="tree"><div class="original"></div></div>
<div class="tree"><div class="advice"></div></div>
I'm having issues getting an angled stripe background to show nicely in Chrome.
background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1) 1px, transparent 0px, transparent 4px);
http://jsfiddle.net/hornetnz/JxvNd/
It seems to show in Firefox and IE10 fine. But Chrome develops a pattern gap every few lines.
Try this:
background-image: -webkit-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
background-image: -moz-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
background-image: -ms-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
background-image: -o-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
-webkit-background-size: 4px 4px;
-moz-background-size: 4px 4px;
-o-background-size: 4px 4px;
background-size: 4px 4px;
/* Background size must be an even number! */
Here's your updated example: http://jsfiddle.net/JxvNd/1/
This seem to be chrome rendering bug as answered here: Chrome linear gradient bug
You could try some of these alternatives:
Use blur edge transition like described in above link
Use svg (looks like this is the pattern you want: http://www.svgeneration.com/generate/Diagonal-Stripes)
Try using regular linear-gradient and combining it with background size (not sure if it's possible to get repeating background that way. I will try and make pen later)