Control (hide) contents of image using only CSS

Question

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.

The sample could be done with just CSS without an image at all. Make the squares divs with different background colors. — DA.
– DA., Commented Jun 4, 2012 at 23:29
Possible alternative option: Make the the image a transparent GIF and change the background color of the img. I'm not sure you CAN assign a background color to an image, though. — DA.
– DA., Commented Jun 4, 2012 at 23:30
@DA I suppose I did not stress strongly enough: if this is to work there cannot be any changes to the markup whatsoever. Certainly if I can change the markup I can do this in a heartbeat. The question is (and I'll edit above to be super bold clear about this): can this be done with the existing markup? — Phrogz
– Phrogz, Commented Jun 4, 2012 at 23:36
Is the 'bar' the teal, the 'a' the border and 'img' the color? If so, you wouldn't need the img, so you could hide it via CSS, then use the 'a' with both a border and background color. — DA.
– DA., Commented Jun 4, 2012 at 23:53
I came up with this using your markup unchanged: jsbin.com/opored but I'm not exactly sure what you intend each element to be. — DA.
– DA., Commented Jun 5, 2012 at 0:03

pasine · Accepted Answer · 2012-06-05 00:09:18Z

1

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

answered Jun 5, 2012 at 0:09

pasine

11.6k10 gold badges53 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Phrogz Over a year ago

This sadly fails the requirement of "The number of items is arbitrary but should distribute vertically throughout the #foo."

DA. Over a year ago

@phrogz just get rid of the height on #foo

Phrogz Over a year ago

@DA Not an option :p. See my latest comment in the question (to thirtydot) for why the fixed height is important.

DA. · Accepted Answer · 2012-06-05 16:49:45Z

1

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.

answered Jun 5, 2012 at 16:49

DA.

40.8k51 gold badges162 silver badges219 bronze badges

1 Comment

Phrogz Over a year ago

+1 for getting closer, but as you can see from this using vertical-align:middle does nothing to center each dot within the "cell" without that style being applied specifically to a display:table-cell element. No acceptance mark because this doesn't actually solve the question asked in the title and first paragraph of this question (separate from the reason I happen to want it).

Collectives™ on Stack Overflow

Control (hide) contents of image using only CSS

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related