I have a page with a black, starry background and the navbar has white text. The navbar stays at the top when you scroll, and the links of the navbar become almost invisible when they pass over other images on the page because the navbar is transparent. How can I invert the color of the text based on whatever is directly behind it?
You want to use mix-blend-mode: difference;, like here: https://jsfiddle.net/avdeoq97/
But it would be better to give your navbar a different background, like a dropshadow with a glass effect, so it can always be seen. The inverted colour alone might not be very accessible.
Related
Background behind button should be like block background. Button can change its width.
How I can realise this?
This might be done in a lot of ways, here's just my first idea:
Use a mask like this:
Make sure your background-image covers the whole button
Insert two white divs above the background-image: left & right of your button
Insert a Mask like the above as the buttons background
Due to the transparent area (indicated by the texture) you are able to display a border-like part of your background image while the rest of it stays invisible, because its overlapped.
I illustrated the result of the instructions above
I have a page with a large background image. The menu and main content portions are 900px and centered. Rather than just fill the menu background with a color, I'd like to simply blur the background image. I'd also like the blurred part to move appropriately when the page is resized so I can't just blur a section of the background. How is the best way to achieve this? I tried putting a semi-transparent .png as the background to my menu div but that didn't work, I didn't see any effect. Does anyone know how to do this? Thanks.
The site that inspired the question is this one: http://www.bluespooncoffee.com
http://jsfiddle.net/MAbpx/
background: rgba(255,255,255,0.5);
This makes the background of something semi transparent because the last value is the alpha (transparency value). Adjust as needed.
I am currently creating a one page website, however I am having an issue, I need the scroll text underneath the fixed element however you can see the text that should be dissapearing under the fixed position element, as the element as a back-ground, which is a transparent png, is there any way I can hide text as it scrolls underneath the fixed position element.
Here is a fiddle of what I have, so far
JS FIDDLE
Ideally I am wanting it so that when text moves behind the box with red borders it is not visisble, without the need for a background color.
I have visited your website and stolen some images to better understand what you are trying to accomplish.. Assuming i'm correct in the assumption you do not want a solid background on the header because it would mess with your pages background....
you can use multiple backgrounds...
see your demo
You will need something in #banner that will hide the text. From the css it looks like there is supposed to be a background image in that block, but it is not showing up.
The header is transparent as set in your css reset, so a color or image will be necessary if you want the text to be hidden. Otherwise, it's like moving the text behind a piece of glass...you will still see the text unless you have something to actually cover it.
I suspect if there was a working background image on the header, it would block the text where it wasn't transparent. When I add a background-color it achieves that effect.
I have an image that has some white on the edges, and I want to change the background color of the div that the image is contained in. Now when I do this, I can still see the little bit of white surrounding the image, and it looks terrible.
Is there a way I can change the background color of the image to whatever the background color of the div is, and would this be the best way to do it? Or does it make more sense just to edit the extra white out of the image.
You should just fix the image.
If the image has a transparent background then you can change the background color the same way you would a div.
Edit You may also want to check to make sure there is no padding, borders, ect. that would cause this issue to happen
If i hover over the thin vertical bar on the left, it highlights the entire scope of the block that's to the right. When this scope is large, my entire screen flashes white (a consequence of my custom color scheme). Is there a way to change that color? i don't recall there being one when i made the theme.
It's Tools->Options->Environment->Fonts and Colors->Collapsible Region. The foreground color is the highlight on the margin, and the background color is the highlight in the text area.