I have a fixed position element at the bottom of the page bottom: 0 with a background colour of black. It's a navigation element that has things scrolling behind it.
I'm trying to do a stained glass effect using backdrop-filter: blur(20px) so I need to change the opacity of the background-color: rgba(18,18,18,0.3).
When I add the filter change, the fixed element goes up 1px, which means I can see a pixel of the things scrolling at the bottom of the page.
Why is this happening?
What can I do to prevent/fix this?
Thanks in advance!
.myDialog {
padding: 5px 10px;
background-color: rgba(255,255,255,0.4);
backdrop-filter: blur(20px);
position: fixed;
bottom: 0;
}
body {
background: green;
}
<div class="myDialog">
I don't disappear when you scroll!
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>aksldjnaskjdnaksjdnakjsdnakjnsdkajsndakjsndkajsndkjasndkjasndkjandkjanskdjnaskdjnaskjdnakjsdnakjsndkajndkjasndkjansd<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
(there's a piece of text that when you scroll through, you see it behind the fixed box).
https://jsfiddle.net/379heofx/2/ (in case code above doesn't show, which boggles my mind even further)
screenshot of issue:
You can try and use the opacity keyword instead.
So like this:
yourelement {
background-color: black;
opacity: 0.3
}
Related
I want to change my div background color and image on hover. Just like this.
I tried with this way. But it changed only background color. Is there any way to achieve this kind of situation?
<div class="col-md-4">
<div class="icon-wrapper"></div>
<p>Products</p>
</div>
.icon-wrapper {
background: url("/assets/human-resources.png");
display: inline-block;
background-position: center;
background-repeat: no-repeat;
border: 1px solid #ddd;
height: 120px;
position: relative;
width: 120px;
border-radius: 50%;
transition: all 0.2s;
img {
top: 22%;
left: 24%;
position: absolute;
}
&:hover {
background: blue;
background-position: center;
background-repeat: no-repeat;
background: url("/assets/car-white.png");
}
}
background-color: #6DB3F2;
background-image: url('images/checked.png');
you could try to use this instead
background: #6DB3F2 url('images/checked.png');
I don't know all layout of your website but I can tell you a short introduction to popups - how to create them in right way.
At first, outside all other div blocks create another one for background mask (between last div block element in html and closing body tag) - it will be used only as background layer (with absolute position), style as you wish and set display none to hide it.
Then create another div block for popup (not inside background block but under it, position fixed to scroll with your page), create popup and style how you want, hide it as well (display none).
This will give you reusable popup structure that you will be able to use how many times you need afterwards just adding new popup block under first one etc.
I know it is just a theory without real life examples, so you can study a bit here (about structure, jQuery can be used in more easy way):
Reusable modal popups
P.S. Answer to your question:
You need to change background-color and background-image (on hover state). :)
In my understanding you are trying to change the background image and the background color on hover, right?
Try this:
yourElement:hover{
background-color: yellow;
background-image: url(../images/bg.gif);
}
Example 1 : Table row background color change
<table>
<tr bgcolor="#777777">
<td>Content Write here...</td>
</tr>
</table>
Example 2 : If change background image then use this code
<div style="background-image: url('bg.jpg');"></div>
Because you are overriding background on hover selector thats normal situation. Try background-color:blue; on hover selector
I have a custom webkit scrollbar like this:
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: #999 !important;
}
So it renders a grey custom scrollbar instead of the standard one. However, it is stuck to the right side of the page. I know I can change this by adding a margin, padding or border to my body but I am using fullscreen (on backgrounds) images. So when I try this all the images are affected by this too, which I do not want. So I tried to position the scrollbar but this does not work (as it is not an element but a user agent property...
So I'm looking for a way (without using another plugin) to customize the toolbar so that it is offset from the side.
Or, if possible that I can make the scrollbar offset in a div.
Secondly, I'm looking for a way that I can make the "track" of the scrollbar transparet. So only a handle.
Thanks in advance!
If you are still looking for for the answer (or somebody else is, like I was) - here is a definitive article about webkit scrollbars.
Answering Your first question - I'd suggest that you put all your scrollable content in a div with 100% height and 90% width - the 10% left on the right would be your offset. Like that:
.superDiv{
height:100%;
width:90%;
position:fixed;
}
body{ overflow: hidden }
The second question - you're looking for
::-webkit-scrollbar-track-piece {
background:transparent;
}
But as Apple people are pushing for no-scrollbar web browsing, only the properties set by CSS are visible, so you don't have to change the track-piece.
Clever solution I found recently was to put the border on the right hand side of the screen / div that contains scrollbar:
<div class="yourdiv">
border-right: 5px solid #(background_color);
</div>
An easy way to control the position of a custom scrollbar is to set the scrolling element (body?) using definitive positioning. You'll also need to set html to overflow:auto;
To make the thumb transparent, use a RGBa value for declaring the color. In this case I used 0,0,0,0.4 (red,green,blue,alpha). RGBa is not supported in every browser, Chris Coyier has a good table of who supports it here: http://css-tricks.com/rgba-browser-support/
If all you want to show is the thumb than also consider hiding the other elements of the scrollbar: resizer, scrollbar-button, and scrollbar-corner.
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 5px;
right: 20px;
overflow: scroll;
}
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: rgba(0,0,0,0.4); /*-- black at 40% opacity --*/
}
::-webkit-resizer,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner { display: none; }
Check out the working demo at http://jsfiddle.net/Buttonpresser/G53JQ/
http://www.milknhny.co.uk/SofiaWork/home/
Hi
The following has a banner, which has a box shadow, and i want it to sit over the top of the image.
Ive tried putting a z-index and position of absolute on the div class .maincontentinner
however the background seems to mess up (with it being a gradient) when i do this.
Any ideas how i can achieve this? I have a clearfix in there also
thanks
style.css line 431
.headerwrap {
width: 100%;
height: 218px;
background-color: #ffffff;
box-shadow: 3px 3px 8px #41434b;
posistion: fixed;
z-index: 99999;
}
Change posistion to position.
First off, I'd use relative rather than absolute positioning, since I don't think you want to disrupt page flow.
I applied:
position: relative;
z-index: -1;
to .maincontentinner and it seems to work just fine. What do you mean by "the background seems to mess up"? What browser are you testing in?
Is it possible to change the whole page background when hovering over different links in a seperate div on the page using css? I am not very experienced with JS, so explaining will be needed if JS is mandatory. Appreciate any help. Thank you!
div background color, to change onhover
This may help you.
With javascript, you can do:
<div onmouseover="document.body.backgroundColor='yourColor';"> </div>
Using CSS alone, it is not possible to affect the style of an ancestor of the hovered element. Your problem requires JavaScript.
Well, it is somehow possible. You won't be actually changing the page's background, but the effect will be similar.
Take a look at the code.
body {
background: lightblue;
}
a:hover:before {
content: '';
position: absolute;
display: block;
top: 0; bottom: 0; left: 0; right: 0;
z-index: -1;
}
li:nth-of-type(1) a:hover:before {
background-color: blue;
}
li:nth-of-type(2) a:hover:before {
background-color: red;
}
li:nth-of-type(3) a:hover:before {
background-color: green;
}
Basically you just have to create a pseudoelements when a cursor hovers over a link. That pseudoelement, having absolute position with top, bottom, left and right equals 0, will take the whole screen and giving it a z-index -1 will make sure it will be below every other elements on a page. Of course you declare a background color or image in a corresponding pseudoelement.
There's a drawback, though. It's not too flexible. For example, if any of ancestor elements will have a position other than static (default), this will be a bit harder - if not impossible - to implement, since you will have to adjust the top, bottom, left, and right properties.
missing style in onmouseover:
class="test" onmouseover="document.body.style.backgroundColor='red';"
Ok, so in my page I am showing a background image with this css:
.heroarea {
background:url(/static/images/mrd_hero_01.jpg) no-repeat;
height:450px;
}
and the copy placed over it and the container the copy is in have these styles:
.main-panel {
position: absolute;
top: 130px;
left: 380px;
background: #fff;
width: 560px;
height: 340px;
padding: 30px 30px 20px 30px;
/* CSS3 standard */
opacity:0.5;
/* for IE */
filter:alpha(opacity=50);
}
.main-panel h1 {
background: transparent;
color:#39372f;
text-align: center;
/* CSS3 standard */
opacity:1;
/* for IE */
filter:alpha(opacity=100);
}
Generally, everything is as expected. That is, the image shows where I expect it to show. main-panel shows a white back ground with a transparent background. However, the text in the h1 tag is also transparent. I can see the image from underneath showing through. How can I make this so that the h1 tag content is not opaque?
Thanks!
Opacity applies to the element, not it's background.
You either need to use a translucent image, or an rgba background colour.
There is an explanation about how to do this in a backwards compatible way. (Disclosure: My site)
Use rgba and/or transparent png. Alternatively, move the content to a separate sibling div as the background:
<div id="parent">
<div id="opacity"></div>
<div id="child">text</div>
</div>
If you use transparency on a block element it makes the child element inside transparent as well.This is how css works ! I do not think there is any way to hack out of it. What you can do it to absolutely position h1 without making it a child or use a translucent image
It looks like your text is a child of .main-panel. It will take on 50% opacity. Even though you state the text is opacity 100% will only make it 100% of 50%. You will need to layer it outside of .main-panel and place it on top.
You have to move it outside of its .main-panel parent. There's no way to override the 50% opacity that's being applied there.
Alternatively, if you're only using 50% opacity to make the mrd_hero_01.jpg background image transparent, you could convert it to a .png with 50% opacity and then you wouldn't need to set the opacity on .main-panel.