CODEWITHSUNDEEP
css
Phrogz
Phrogz

Reputation: 303224

Control (hide) contents of image using only CSS

Is there a CSS hack/technique to take an <img> element (with no other markup) and hide the pixel content of the image while still displaying it as an element with background color and stroke?

For example, take an <img src="foo.jpg"> on the page and make it a 32x32 badge of solid color.

Though I am interested in browser-specific hacks (does Webkit have a solid-fill effect?) or CSS3 awesomesauce (is there an image-content-opacity:0.0?), I need a solution that works on IE8+, FF4+ and thereabouts.

If you are interested in the motivation for this question, see the edit history of this page. It has been removed because it was distracting users into helpfully trying to find workarounds to solve that problem instead of answer this question.

Upvotes: 2

Views: 123

Answers (2)

DA.
DA.

Reputation: 40673

This is a take off of my comments above and notme's solution:

http://jsfiddle.net/ZUvHN/7/

What I did was I removed display:table-cell from the a and then set it to display: block

I then set the img to display: none

This lets you then apply the border and background styles to the a tag instead of the img tag. You'll likely have to tweak the margins and spacing a bit.

I don't know if you have the option or not, but it might be easier to tweak the HTML a bit via JavaScript.

Upvotes: 1

pasine
pasine

Reputation: 11543

Hide the image and use the background filled with a solid color.
Example here http://jsfiddle.net/notme/ZUvHN/6/

Upvotes: 1

Related Questions