渲染CSS3使用图像插入阴影 [英] Rendering CSS3 inset shadow with an image
问题描述
我想利用我正在处理的网站的新CSS3框阴影功能。
问题是，如果内部有一个img（边框围绕图像区域），Chrome 9.0.5和Opera 10不会正确呈现插入边框。
I would like to take advantage of the new CSS3 box-shadow feature for a site I am working on. The problem is that Chrome 9.0.5 and Opera 10 do not render the inset border correctly if there is an img inside (the borders are hiddden around the image area).
我知道box-shadow仍在进行中，但我希望浏览器完全支持或完全忽略它。
I understand box-shadow is still work in progress, but I would expect browsers to fully support it or fully ignore it.
<!doctype html>
<html>
<head>
<style>
div {
border: 1px solid black;
width: 300px;
height: 200px;
overflow: hidden;
// CSS3 inset shade
-moz-box-shadow: inset 0 0 20px red;
-webkit-box-shadow: inset 0 0 20px red;
box-shadow: inset 0 0 20px red;
}
</style>
</head>
<body>
<div>
<img src="http://www.google.com/images/logos/ps_logo2.png" width="364" height="126" alt="" />
</div>
</body>
</html>
有人知道正确渲染红色阴影的解决方法吗？
Does one know some workaround to render the red shade correctly?
感谢！
编辑：我对此答复感到满意，但只想添加一个活动链接来帮助其他有人在那里。 这里是
I am happy with the answer, but just wanted to add a live link to help other folks out there. Here it is
推荐答案
使用插图时，阴影正好在堆叠顺序的背景上方。
Box-shadow is just above the background on the stacking order when using inset. Therefore, any image you have inside the div will cover the shadow.
每个 W3C Specs
绘制顺序，
元素的外部阴影绘制在紧靠元素背景的
下面，
元素的内部阴影是直接在上面绘制的
该元素的背景
（在边框下方和
边框图像，如果有）。
In terms of stacking contexts and the painting order, the outer shadows of an element are drawn immediately below the background of that element, and the inner shadows of an element are drawn immediately above the background of that element (below the borders and border image, if any).
单词，Chrome和Opera正在做的正确（FTR，FF 3.6.13和Opera一样）。
In other words, Chrome and Opera are doing it correctly (FTR, FF 3.6.13 does the same thing as Opera).
如果你想要阴影重叠的图像，你有几个不同的选项，取决于您的需要：
If you want the shadow to overlap the image, you have a few different options, depending on your needs:
- 将图片设为
背景属性的div。 - 在图片上放置一个div，使其大小相同，并将阴影放在那里（不是真的推荐，因为它是复杂的，并添加非语义标记）。
- 确保图片的背景是透明的（这将允许阴影通过，但不透明的像素仍将覆盖阴影）。
- 考虑使用border-image和gradient。 （这一个也有点复杂，但将渐变放在边框本身，你可以使用RGBA褪色为透明。）
- Set the image to the
backgroundproperty of the div. - Absolutely position a div over the one with the image, make it the same size, and put the shadow there (not really recommended, as it's convoluted and adds non-semantic markup).
- Make sure the backgrounds of the images are transparent (this will allow the shadow to show through, but non-transparent pixels will still cover the shadow).
- Consider using border-image and gradient, instead. (This one is also a little convoluted, but puts the gradient in the border itself, and you can fade to transparent using RGBA.)
这篇关于渲染CSS3使用图像插入阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
