I have some CSS that changes the background color when you highlight any text on the page:
*::selection {
background:#083875;
color:white;
}
*::-moz-selection {
background:#083875;
color:white;
}
The problem is that the background color of this text (on highlight) is slightly transparent. Is there any way to make the background completely solid using only css?
This issue is occurring in Opera 25.
In Opera 25, you can't control the opacity of the selection of text.
Even forcing the opacity using the rgba(0,0,0,1) produces a semi-transparent background.
*::selection {
background: rgba(255,0,0,1);
color:white;
opacity: 1;
}
http://jsfiddle.net/j9u9qx8x/1/
Test results in Opera 25
Perhaps try submitting a support ticket to the Opera development team to see if they can allow this functionality. It makes sense that you should be able to override the transparent effect by forcing the opacity in the rgba() color syntax.
Related
So i'm new to using css and im currently working on a forum thats using xenforo. However I thought it'd be neat to see this effect in place of the admins or moderators usernames.
If you guys could help me out or give me some info on how to go about it that'd be great!
Heres a Video of what I mean if you don't know:
https://www.youtube.com/watch?v=XdL9iDQs3t8
Also, I'm trying to do this all in css only for the "User Name CSS" field on xenforo. I'll keep tryig to figure it out but thanks if you can help!
The closest thing to the text in that video, would be to have a rainbow gradient across the entire phrase, not a different colour per letter.
I have created an example here:
.rainbow_text {
display: inline-block;
background: black;
background: linear-gradient(to right, red, orange , yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.rainbow_text.animated {
animation: rainbow_animation 5s ease-in-out infinite;
background-size: 400%;
}
#keyframes rainbow_animation {
0%, 100% {
background-position: 0
}
50% {
background-position: 100%
}
}
<h1 class='rainbow_text'>Austen Holland</h1>
<br>
<h1 class='rainbow_text animated'>Austen Holland Animated</h1>
There are two pieces of CSS that make this possible. background-clip / -webkit-background-clip: and color.
When the background-clip property is set to text, the background is painted within (clipped to) the foreground text.
When the color property is set to transparent, the text is.. well.. transparent. That allows the gradient from the background to show through!
There a few catches here though, and that's browser support with background-clip: text;!
Internet explorer does not support it at all, and chrome, opera, safari, android all require the -webkit- vendor prefix. Browsers like edge and firefox support it without the prefix.
The issue I'm having is that I don't know what they mean by a style rule that sets a font color to white for older browsers and white with 50% opacity in newer browsers and removes the underlining from the link text.. I didn't realize there was the potential to differentiate in the first place.
Update: How would I go about making it so that every time a mouse hovers over a text link, that it would display an image in place of a bullet?
Use fallback styles. Write the universally understood property first, then the newer version of the property, which the modern browsers will use but the old browsers will simply ignore.
Example: set color to white for all browsers; then set color to white with 50% opacity for browsers that understand it.
.yourclasshere {
color: #FFFFFF; /* standard syntax understood by all browsers */
color: rgba(255,255,255,.5); /* new feature, ignored by old browsers */
}
Not sure how to handle the request to remove the underline in newer browsers. AFAIK all browsers always understood text-decoration. Maybe you could use parent > child for a selector.
In that specific case you could use a fallback like:
.selector {
color: #fff; /* white */
color: rgba(255, 255, 255, 0.5); /* 50% opacity white */
}
So, as CSS rules are interpreted from top to bottom, modern browsers will set the color to transparent white. Old browsers won't be able to apply that rule since they don't support RGBA colors, so #fff will prevail.
Alright So here is my CSS style sheet.
#mainheader,#content{
opacity:0.35;
text-align:center;
background-color:#000000;
border-top-style:ridge;
border-left-style:ridge;
border-right-style:ridge;
border-bottom-style:ridge;
}
And as you can see it's a box that's see through, but has a small black background making text look fuzzy. Example.
http://i.stack.imgur.com/18dOZ.png
When I take away that background color I get more clear text like this...
http://i.stack.imgur.com/ixLva.png
Alright So what i'm trying to say it what can I write to have that text above that box being very clear text and not with it's dark opacity.
If you want to use CSS3, try:
background-color: rgba(0,0,0,0.35);
instead of opacity.
http://jsfiddle.net/vsZtM/
References from W3.org about RGBA:
http://www.w3.org/TR/2003/CR-css3-color-20030514/#rgba-color
http://www.w3.org/wiki/CSS3/Color/RGBA
Instead of opacity, change background of containers with an alpha channel:
#mainheader,#content {
background: rgba(0,0,0,0.35);
}
Where last param is the opacity.
Opacity changes the opacity for the entire element, while background:rgba(0,0,0,.35) will change only the background color.
You should try using rgba instead of opacity like so:
background-color: rgba(0,0,0,0.35);
Note: this is CSS3 and will only work in IE9 and up, so for other versions you should provide a fallback like so:
background-color: #000;
background-color: rgba(0,0,0,0.35);
You can set the background-color as an rgba value, and leave off the opacity in your CSS statement. For example:
#mainheader,#content{
text-align:center;
background-color: rgba(0, 0, 0, .35);
border-top-style:ridge;
border-left-style:ridge;
border-right-style:ridge;
border-bottom-style:ridge;
}
This will let your text stay fully opaque, while your background is semi-transparent. As a note, however, this will not work in Internet Explorer 8 and below -- it will be a solid background.
The background-color of my body is #ffffff. And I have a div that I need is colored but it needs to be transparent or see through. Is it possible to do this using CSS3 or do I have to use images to achieve this?
body {
background-color: #ffffff;
}
.box {
background-color: #999999;
background-image: linear-gradient(to top, #999999 0%, #444444 100%) !important;
opacity: 0.7;
}
Update:
If you go here: http://pinesframework.org/pnotify/#demos-simple and look for the demo for Transparent Success you can see how the pop-up looks see through on a white background. I need to do something like that without using an image as they are using one.
It sounds like you want an alpha transparent background color. If that's the case, you can use RGBA colors, rather than a solid hex value and an opacity property. This way, only the background will have transparency, not the content.
In your case it would be:
.box {
background-color: rgba(255,0,0,0.7);
}
You can also specify a fallback color to browsers that don't support RGBA (IE 8 and older), or create a PNG image with the color fill you want. My vote is toward progressive enhancement, and just specify an alternate color for browsers that don't understand RGBA:
.box {
background-color: #ff4c4c;
background-color: rgba(255,0,0,0.7);
}
UPDATED: Per your comment below, this question appears to be a duplicate of CSS - Opaque text on low opacity div?.
You need to change the opacity of the background instead of the element:
.box {
rgba(255,0,0,0.6);
}
Or, since you are using a gradient, I would use this:
Ultimate CSS Gradient Generator
It will allow you to do semi-transparent backgrounds with a gradient.
I have got ot the following css to make my table cell's background transparent
background-color:black;
filter: alpha(opacity = 20);
the problem is, this transparency also makes the text transparent. How can i make it only target the background. or how can i over ride it when in my <span>. I've tired setting the occupicy to 100 in my <span>s for text but it doesnt override it. the text still comes out transparent
EDIT: I'm using IE6
You want to use rgba color which lets you set the alpha transparency of the color:
background-color: rgba(0,0,0,0.2); /* == black 20% opacity */
Read about rgba here: http://css-tricks.com/rgba-browser-support/
You can use filter for IE, code for all browsers would be:
background-color: #000000;
background-color: rgba(0, 0, 0, 0.2); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33000000',EndColorStr='#33000000'); /* IE6–IE9 */