I have a gray linen background image that I repeat to give the whole body a gray linen look. I'd rather it had a gold tinge to it , though, but I don't have a gold linen image to repeat.
So I was thinking that perhaps I could give he body a gold background color and then apply some transparency to the background image but I'm not seeing any thing in CSS3 that will do that.
Am I missing something?
Thanks
Wrap the whole page in a <div> with the background-color: rgba(#, #, #, .#) set to the RGBA for gold with the alpha (the .#) set to your preferred opacity level.
You could add opacity: 0.5 to the CSS of the background image that you would like to use. Then, you would be able to add the different color behind it as you wish.
Related
I just downloaded an html template, in that I can see the images having white background, but when those are used in site, they have background color changed.
And this is what I see in the site:
So How to achieve this effect, I spent whole night changing background color of an image in photoshop, that does not look as good as it is in this image,
So there must be some method in CSS to do this..?
This is done by image type. You likely need a PNG with transparency. If you are familiar with photoshop, you just erase the background (so the alpha-layer can show through there) and then save an a png. This will let the background color "show through" the image.
Try this
img {
background-color : blue;
}
This will appear on when you use a png transparent image.
I am searching for a pure CSS method for creating transparent text within a box(div,p,etc) where the box is filled with a color surrounding the text, but not the text itself (which would be transparent a la rgba/hsla).
Imagine a div styled in such a way that the text color within is rgba .2 alpha lvl, and the background color is solid, where the background solid color cannot be seen in the text. Of course, a solution using multiple stacked divs/blocks would be greatly acceptable, but should allow for a hover state, so the effect can be switched on/off. In using this, one could apply this div on top of an image or another div that can be seen through the letters.
SO! CSS/html works in such a way that text is always applied on top of a background (called a background for a reason), so, using transparent colors on text color does nothing but show the color of the background. I have tried creating a background with a big box shadow, in order to see if it's ever calculated differently, and it is not (and couldn't think of another method).
Instead of blabbering on with my limited CSS knowledge, I think you get the point, so give me your best! I want this to work in Chrome and Firefox at least.
Stacked Overflow doesn't allow me to put a jsfiddle without accompanied code, and I don't want to put pointless code here just to link to a 'starting point' code.
Instead, here's an image explaining the obvious idea:
Demo Fiddle
You CAN accomplish this in CSS only, but with limited support.
You can set the -webkit-background-clip property, and -webkit-text-fill-color to transparent.
This will only work in webkit browsers however.
e.g.:
div {
color: white; /* Fallback */
background: url(yourimage.png) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
See here for more on background-clip
The background-clip CSS property specifies whether an element's
background, either the color or image, extends underneath its border.
If there is no background image, this property has only visual effect
when the border has transparent regions (because of border-style) or
partially opaque regions; otherwise the border covers up the
difference.
Alternatively- you can use SVG, per this question
I'm trying to recreate something like this for one of the forms on my site by using opacity to make the form field background only 20% visible, but when I do this it also affects the text on the inside, and when you type something in. How can I make the opacity apply only to the background?
opacity will always affect all included (child) tags. You may put 1px png image with required color and 20% visibility in background (or, if that is some image there, not jus solid color - change alpha for the whole image). And looks like that is what you need (I finally understood that I should look at image instead of site design available by your link))
Another option is to put some div with opacity below other tags using css position, z-index etc. But in this case there should be one, for instance, div which contains all your content that should not be transparent and another div with opacity near it
Give a different class for the Field and Make opacity for field 100%
Can you use the CSS Filter attribute for IE gradients AND implement a background image?
/*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c8bcf', endColorstr='#0068b3');*/
As far as I know the background has to be "transparent" or none for the gradient filter to work..
perhaps you could wrap the gradient div with another div and put the background image on the outer one?
Wait! it does appear to work, glad I checked..
Working Example (IE only)
sorry about that I really thought it didn't work with a background, but couldn't find a reliable source - anyway in that fiddle above I changed the gradient to go from transparent to black
I'm not convinced that it can be done. It appears that in the jsfiddle above, the hex values have an extra 2 "0"s in them. if you set the values to actual hex chars, the example does not work. perhaps the background will show through if the gradient is going from transparent to a color only
Right now I have this CSS for a button:
background: #19558D url(../images/gradient.gif) repeat-x top left;
The gradient appears, but the background color doesn't. When I reload the page, the color appears for a split second, but then disappears to the gradient. How can I get both of them to work?
Ok, so you have several options:
1. Use Only Images:
You can do the job by editing the gradient so that it looks exactly how you like it to be, without any new CSS. (This would be the one you used to solve the problem).
2. Use Image on the top and the rest in solid color:
element{ background:#000 (url) top left repeat-x; }
This will place the image in url at the top, and make the rest of the element of a certain solid color. Be aware that if the image covers all of the element and isn't transparent, then the solid color will not be visible.
3. Make the gradient transparent/alpha:
If the gradient covers all of the element, you can make it transparent, or semi transparent, so that the CSS background-color is visible behind it. For example, if you make a gradient that goes from black to transparent, and then add a white CSS bg, then you will get a black to white gradient. Be aware that the only images that will work with this method are .png ones because they are the only ones that support alpha levels (partial transparencies).
is the GIF transparent? I use PNG format as PNG-24 allows alphablending masks, where as GIF only supports transparent or not (1/0)
But I think you need to post a link to it or a image of what it looks like, including the GIF.
We need some pixels specs, such as width and height to fully understand the problem.