2

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.

Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • 1
    The sample could be done with just CSS without an image at all. Make the squares divs with different background colors. – DA. Jun 04 '12 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. Jun 04 '12 at 23:30
  • 1
    @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 Jun 04 '12 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. Jun 04 '12 at 23:53
  • I came up with this using your markup unchanged: http://jsbin.com/opored but I'm not exactly sure what you intend each element to be. – DA. Jun 05 '12 at 00:03
  • ah, my example probably doesn't meet the 'must be distributed evenly vertically' requirement--but I think the premise is the same...I'm removing the `img` with `display: none` and moving the color+border to the `a` element. – DA. Jun 05 '12 at 00:05
  • @DA Correct, your demo does not meet the requirements. I agree that hiding the image is one way to not get its contents to show, but I believe that I need it to be present to achieve my goals here. – Phrogz Jun 05 '12 at 15:39
  • Why can't the HTML change? Here's a possible solution that involves adding a `span` around each `img` and using `:after`: http://jsfiddle.net/thirtydot/rsvJU/. – thirtydot Jun 05 '12 at 16:22
  • @thirtydot Because those are the rules of this game :) To satisfy your curiosity, the desire is to get the carousel on [this page](http://developer.nvidia.com/category/zone/cuda-zone) to look more like [this mockup](http://screencast.com/t/kXxd9uu9q8) without futzing with the CMS or plug-in. Amusing work on the fiddle, keeping the text "**without changing the html**" while changing the HTML. :) – Phrogz Jun 05 '12 at 16:56
  • You could "give up" and use JavaScript to help, because you're already using it for the carousel. Alternatively, you could try keeping it horizontal, using [this technique](http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs/6880421#6880421) to justify the links, and then CSS3 `transform: rotate()` to make it vertical (I'm assuming the carousel is a fixed height). Then you'd be able to use the `:after` technique from my previous comment. I'm loathe to post that as an answer, because it seems too convoluted. And, it might not even work. – thirtydot Jun 05 '12 at 17:20
  • @thirtydot I appreciate your suggestions. Perhaps I should not have posted any of my distracting motivations for this question, as everything you've said helps with that goal but none of it helps to answer the question posed by the title and first sentence of this question. There are many, many ways of accomplishing my end design that are trivial if I involve HTML or JS changes. I will likely end up using one of them. But finding workarounds is not the question. – Phrogz Jun 05 '12 at 17:22
  • @Phrogz, I appreciate your insistence on sticking with the specifics of the question. But realize that a lot of questions asked here end up with answers that are really not answering the specific question, but help answer the overall objective. (In otherwords, a lot of people ask specific questions when the answer is really about stepping back and rethinking things). So, I'd suggest removing the entire 'motivation' part of your question. Might help with getting a specific answer to the first question. – DA. Jun 05 '12 at 17:42
  • @DA Would you consider the edit I've made sufficiently clear? – Phrogz Jun 05 '12 at 17:44
  • FWIW, I think the answer to your specific question is 'no', as an image tag doesn't have any content. That said, I am curious about it and hope some experts can come along. I know IE has image filters and Webkit has begun introducing them, so perhaps there is some way to make the image translucent but not it's 'box'. – DA. Jun 05 '12 at 17:44
  • @Phrogz what I'm saying is that it sounds like you're really mainly just looking for an answer to your first two paragraphs. Adding a motivation/background is usually great for people to help come up with alternatives, but as you're not looking for alternatives in this case, I'd just remove that entire section. – DA. Jun 05 '12 at 17:45
  • @DA OK. I consider it a bit of a catch-22, as posting just the first paragraph would surely have resulted in _"What's the real problem you're trying to solve?"_ and _"What have you tried?"_ – Phrogz Jun 05 '12 at 17:48
  • With only the first paragraph posted, I'd definitely have posted [this link](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). – thirtydot Jun 05 '12 at 17:48
  • @Phrogz, yea, you're right. It is a bit of a catch-22 here. ;) FYI, I did just play a bit with webkit's opacity but the problem is that it also affects the images border and background color, so probably isn't the solution for this either. Bummer. – DA. Jun 05 '12 at 17:50

2 Answers2

1

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

pasine
  • 11,311
  • 10
  • 49
  • 81
  • This sadly fails the requirement of _"The number of items is arbitrary but should **distribute vertically** throughout the `#foo`."_ – Phrogz Jun 05 '12 at 03:34
  • @phrogz just get rid of the `height` on `#foo` – DA. Jun 05 '12 at 16:25
  • @DA Not an option :p. See my latest comment in the question (to thirtydot) for why the fixed height is important. – Phrogz Jun 05 '12 at 17:05
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.

DA.
  • 39,848
  • 49
  • 150
  • 213
  • +1 for getting closer, but as you can see from [this](http://jsfiddle.net/ZUvHN/8/) 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). – Phrogz Jun 05 '12 at 17:04