How can I add a background image to an element and make it transparent?
CSS doesn't provide a way to add translucency to just a background image.
You can use the opacity property to make the entire element (content and children included) translucent.
You can use rgba() colour values to make a plain background translucent.
If you want a translucent background image, your best bet is to edit the image itself (and save it in a format that supports translucency, such as PNG).
Did you mean the alpha() and opacity() property?
Take a look here http://www.w3schools.com/css/css_image_transparency.asp
Related
How do I create a full size background image with no CSS?
I don't care if the background attribute is deprecated or not, I want to use it.
If I use the plain attribute, however, the image is tiled, not scaled.
You can't.
The background attribute you want to use was superseded by CSS before the capability to scale background images was added.
There is no, obsolete or otherwise, HTML-only mechanism for scaling background images.
You can't even fake it with a foreground image because you'd need CSS to position it in the background.
Hy guys. I have this problem. So I have an image. In front of that image is simple element with width and height. I want to blur that element so it looks like that part of the picture is blurred. I cannot have any image or background-image in that element. I want to achieve this effect without using any additional image, just css. I tried to put background colour, reducing the opacity and putting filter: blur but it doesn’t look good. I can still read the text that is supposed to be blurred.
It's not possible to do this with full support without javascript, at the moment. But in case you want to support a limited set of browsers, you can use backdrop-filter
The backdrop-filter CSS property lets you apply graphical effects such
as blurring or color shifting to the area behind an element. Because
it applies to everything behind the element, to see the effect you
must make the element or its background at least partially
transparent.
I am working on a drop down menu that I want to make completely with CSS. Within the link I will not only have text that needs to change when hovered over, but also an image. Changing the color of the text is easy. However I am not sure how to swap the images on the hover...
Here is what I want the result to look like:
Where the arrows will be small images that will switch when the link is hovered over. How do I do this using CSS?
http://www.w3schools.com/css/css_image_sprites.asp
Check Image Sprites - Hover Effect section.
Set the image as a background image to a div (with a set width and height), and you can change that value with css.
Ideally put both graphics into one image, so that you can just shift the background position and you don't get any flicker during the transition (Google "css image sprites").
I believe you'd need to use javascript to change the src of an embedded image.
You could also have two images and use display:block and display:none to show/hide them as appropriate, but I don't think that would be the best approach.
Use CSS background: url()... on an element you deem most applicable. Here is documentation and a walkthrough: https://developer.mozilla.org/en-US/docs/Web/CSS/background.
On a side-note, you may want to consider using a sprite as well, https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Image_Sprites
I have the image below - is it possible to fill it with a color (eg: the part in the triangle) using HTML/CSS?
Or can I create this shape with HTML/CSS and then fill it?
Or do I have to use a colored in image?
Would be preferable to use HTML/CSS completely or at least fill the image..
thx
If you leave the part that you want to fill transparant then you can fill it with a color using css. If you want to create the triangle without using an image you can use SVG but that is not supported in some versions of IE (8 and older) or you can use Raphael JS to draw it in pretty much all browsers.
HTML and CSS don't actually DO anything, they're just markup for how stuff should be presented. So no, you cannot edit an image using HTML and CSS only, though it is probably possible with JavaScript.
What you could do with HTML and CSS is to display an image with an alpha channel and set a background color on the element containing the image. The background color would then be displayed where the image is transparent.
you can... Make sure the triangle part of your png is transparent and the rest white... PLace your image in a div with the same width and height as your pic and give that div a background color. Voila... Everything is white except the transparent triangle.
Good luck.
<div style="width:66px;height:30px;background-color:green;">
<img src="yourimage" alt="" />
</div>
I want to know if it is possible to affect the opacity of only a certain color in an Image?
For example, I have a PNG image file that has a simple drawing on it (smiley face) and I set the backdrop to the color 'white' only. I want to use the image on a web page, but I want only the smiley face shown (no white backdrop).
Is there a way to do this?
Not in HTML or CSS but what you should do is open the image in a picture editor that supports PNG transparency and set your image background to transparent (or opacity = 0) instead of white.
Not with CSS. The best way to handle this would be to give your smiley face image a transparent background. That way, you could put a colored element behind it whenever you want to change its color.