If you don't like webkit to highlighting links when tapping them, you can remove that effect with:
-webkit-tap-highlight-color: rgb(0, 0, 0, 0);
Actually I want this effect, but not the extra border added around the tapped element.
Is there a way to remove highlight border only?
If you are talking about that orange borders around inputs on focus, you might want to try to add outline:none; to your CSS properties.
Like so :
input { outline:none; }
a is missing
should be -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
Related
I am trying to set the color for a header on a wordpress website to transparent, so that the logo and menu icon show over the website's other elements and do not have their own background.
My issue is the following. The CSS that sets the header color is the following, in my app.css file:
header.dark-header {
background-color:#252627;
border-color:transparent;
border-bottom:0;
}
If I set that to transparent, the background actually turns white and is not transparent.
Images explaining the issue: https://imgur.com/a/XJta1p1
Website demo: http://security4.forebet.ro
I have no idea what to do or why this is happening. Anybody?
Setting background-color: transparent; should do the trick.
So like this:
header.dark-header {
background-color: transparent;
border-color:transparent;
border-bottom:0;
}
transparent is the default value for background-color, so if the element's background turns white when you use it, the default is probably being overridden by a parent element where background-color has an explicitly set value. Short of digging through your stylesheet and changing this (probably the best solution), you can use the CSS rgba() function to explicitly set the header's background opacity to zero like this:
header.dark-header {
background-color: rgba(0, 0, 0, 0);
border-color: rgba(0, 0, 0, 0);
border-bottom:0;
}
Although be advised that browser support for the rgba() function is still a little spotty.
I have div with opacity:0.80; property that contain text and button. The problem is that button and text also inheritance opacity from div. How to fix it?
I already tried to add opacity:1; to button and text <p> tag, but it does not helps.
I think you want the opacity on the background instead. As Prisoner said, not supported by old browsers.
background-color: rgba(0, 0, 0, 0.8);
w3schools: RGBA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+.
you can't fixed it.Child elements also getting parent opacity
One solution is using rgba:
USE :after pseudo element
element:hover:after {
background-color: rgba(0, 0, 0, 0.1); // black with opacity 0.1
}
I am working on a new theme for a wordpress site, http://hanahanpolice.com/test/ when I hover over the items the background is gray on some. This only happens when I am on the main page (/test) any other page I do not see the gray. I can not find where this color is coming from. Can anyone help?
Look for this class:
.front-page .menu .current_page_item a {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
filter: none;
}
And remove:
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
In your style.css at line 1308 remove background from this class:
.front-page .menu .current_page_item a{
}
And btw, you can always use for problems like this FireBug for Firefox or with IE developer tools - just press F12.
Using CSS3, what RGB-like value should replace VALUE below in order to achieve a solid black background that is 95% transparent?
div { background: VALUE }
Thanks Folks!!!
RGBa (a for alpha)
div { background: rgba(0, 0, 0, .05)};
You can use an RGBA notation.
R for red, G for Green, B for Blue and the A for aplha (percentage of transparency, as you've asked).
So the best answer is :
div {
background : rgba(0, 0, 0, .95);
}
And don't worry, it's supported by all the major browsers (even IE since IE 9) : http://caniuse.com/css3-colors
RGBa, i think:
div {
background:rgba(0, 0, 0, 0.95);
}
Folks i took a challenge test online and the following is the answers they provided to my question above:
div { background:rgba(0, 0, 0, 0.05); }
To check, I ran a test on my system and #Blingue is definitely correct.
Use div {background:rgba(0,0,0,0.05)}
I have almost invisible text on the webpage with opacity: 0.1;
I want it to become visible when selected.
However, the selection is also almost invisible.
Unfortunately, ::selection doesn't change the opacity.
You won't be able to use the opacity property with ::selection. It was never one of the allowed properties, and even if it were implemented, it wouldn't make sense as you're not modifying the opacity of the element itself anyway.
You can use rgba() colors with the text and background rather than opacity on the entire element instead. It's not the ideal workaround, but it works at least for colors:
body {
color: rgba(0, 0, 0, 0.1);
}
::-moz-selection {
color: rgba(0, 0, 0, 1);
}
::selection {
color: rgba(0, 0, 0, 1);
}
<p>Almost invisible text that turns opaque on selection.
Instead of using opacity, just set the alpha in the rgba color like so...
::selection {
background: rgba(255, 255, 0, 0.5)
}