background image of elems with opacity < 1 overflow

[clemos]

<a href='#' class='picto'></a>

.picto{
  opacity:0.5;
  display:block;
  height:50px;
  width:50px;
  background:url('http://demos.silexlabs.org/trycocktail/img/cocktail.png');
}
.picto:hover {
  opacity:1;
}

This will cause the whole picture to be visible, even though the element has a smaller size than its background picture.
On hover, the picture will show correctly (opacity 1).
The issue also appears with other elements (div, span, etc)

Any thoughts ?

BTW it's kind of unrelated, but
do you have any pointers as to how to implement CSS3 features such as gradient backgrounds, text-shadow, border-radius, box-shadow, and such...
(I've put them in decreasing order of interest ;))
I'm pretty familiar with the AS3 drawing API, so I believe it's quite possible.
But I don't really know where to start, and have no real idea how tricky this can be.
And did you actually try to do it ?

[yanhick]

It's probably a drawing issue. All the actual bitmap drawing using flash API is here :
https://github.com/silexlabs/Cocktail/blob/master/cocktail/port/platform/flash_player/GraphicsSurface.hx

In it there are special cases for drawing transparent bitmap for performance reasons, as opaque bitmap can be drawn faster using BitmapData::copyPixels

For the CSS3 features, it's definitely doable though each of them is probably at least 3 to 5 days of work. Among the ones you list, I think gradient background would be the simplest one.
On high-level this involves :

• parsing CSS for gradient
• validating the CSS value
• cascading the CSS value
• including gradient background in the rendering workflow
• drawing the actual gradient using the flash API

If you're interested, I can take time to write a detailed spec for you, or someone else willing to implement it.