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.
Related
I have a photoshop design that has a heading color #524a48.
On the photoshop design there is a gradient-overlay on the text
h1 {
color: #524a48;
background: linear-gradient(to right, rgba(255,239,223, 0) 0%, rgba(255,239,223, 1));
opacity: 40%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
So the overlay gradient from opacity 0 - 1. When using this code here the color of #524a48 doesn't show and I have a half transparent line of text...
Using #524a48 as the webkit-text-fill-color value completely hides my gradient.
How can I have color overlay over the color of my text using css?
Also how can I ensure that a fallback for this? So browsers that aren't chrome or safari will see #524a48. Is passing #524a48 to the color property sufficient?
Thank you in advance
You should be able to make a solution with this
You just need to edit all the alpha layer values
h1 {
font-size: 72px;
background: -webkit-linear-gradient(0deg, rgba(255,239,223, 1), rgba(255,239,223, 1));
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(82,74,72,0.5);
}
<div>
<h1>LINEAR GRADIENT TEXT</h1>
</div>
With how this works, I don't see another way to do what you are suggesting
Other then create an absolute div with exact same contents directly over this one and specifying the color property. I would go with the first solution
Is there any way to avoid the default white box that appears on a custom styled webkit scroll bar?
The white box only appears when overflow is going both horizontally and vertically. (Using Google Chrome)
Edit: I have tried setting body background to a different colour - still only seeing a white box.
Screenshot:
CSS:
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background: rgba(0,0,0,0.35);
}
::-webkit-scrollbar-corner {
background: #0c0c0c;
}
This is a little out of date, but in chrome, you can set background colour to rgba(0,0,0,0). Anything with alpha 0 and the box won't show :)!
::-webkit-scrollbar-corner {
background: rgba(0,0,0,0);
}
As E.C.Pabon mentioned, you can use the
::-webkit-scrollbar-corner {background-color: red;}
tag, setting the background-color to transparent worked for me.
::-webkit-scrollbar-corner {background-color: transparent;}
if you only need the vertical scrollbar you can use
overflow-y: scroll;
the white is the space between the x-scrollbar and the y-scrollbar
i hope it solve your problem
No, there is no way to avoid the white box.
You can set the background-color of it (as you did making it grayish-white in:
::-webkit-scrollbar-corner {
background: #0c0c0c;
}
We deal here with pseudo elements and the color under the ::-webkit-scrollbar-corner is white. So to get the custom webkit scrollbar blend in with your lay-out, you always have to take care of the corner's color AND keep in mind that transparency is over the white color.
While the answer provided by E.C.Pabon was technically correct, the real error was Chrome 50 on x64 Linux had a bug with GTK integration. As of Chrome 51, the issue has been fixed.
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.
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.
I am currently wondering which is the best CSS property to use, Opacity or RGBa? More specifically I am trying to recreate something similar to the famous BBC Home page slider, and it got me thinking why they use Opacity.
In my version I have came across using the following two versions of code:
.left-button {
background: rgb(255, 255, 255) url('../images/left-arrow.png') no-repeat; //FALLBACK
background: rgba(255, 255, 255, 0.4) url('../images/left-arrow.png') no-repeat;
}
or
.left-button {
background: #fff url('../images/left-arrow.png') no-repeat; //FALLBACK
opacity: 0.4;
}
Obviously the second one makes the actual button image opaque too, which is why I assume the BBC has made separate buttons and background masks for the buttons (which in my opinion is unnecessary additional markup).
I'd like to use the first version with RGBa though. Would anyone care to point out why one is better than the other and if there is any compatibility issues I am unaware of?
Opacity is inherited to all child items, RGBa is not. If a child item has a lesser or no opacity, use RGBa.
IE8 and lower does not support RGBa, so you may need an opacity back-up plan.
Neither one is "better" because they do different things, so it depends on what you're trying to accomplish.
opacity sets the opacity for the entire element and all of its contents (text, inline images, etc). RGBa is a way to define a color with a certain level of alpha transparency.
So let's say you have a div:
<div>Hello!</div>
This will make the entire div and its contents ("Hello!") 50% opaque:
div {
background: #000;
color: #fff;
opacity: 0.5;
}
Whereas this will make just the background of the div 50% opaque, while leaving the text at 100% opaque pure white:
div {
background: rgba(0, 0, 0, 0.5);
color: #fff;
}