CSS盒子阴影+透明背景图像=直观分解 [英] css box shadow + transparent background images = intuitive breakdown

问题描述

• 我有一个按钮图像用作某些链接的背景图像.
• 背景图像带有圆角.
• 我想使用css投影而不是在图像中放置投影

问题是，投影阴影似乎在 元素周围绘制.尽管我有点希望通过背景图像的透明部分看到阴影颜色，但是我看到的是背景颜色(

The problem is, the drop shadow appears to be drawn around the element. Although I kind of expected to see the drop shadow color through the transparent parts of the background image, I'm seeing the background color instead (see this jsfiddle).

我的实际目标要复杂一些，但是如果我能满足我的前三个要点，那么我可以完成这项任务.具体来说，我想做的是使用两个嵌套元素以及按钮图像左右部分(圆角)的背景图像，以便我可以使用相同的CSS将按钮"包裹在任意长度的文本周围.由于背景以css的滑动门"样式重叠，因此png alpha阴影显示图像重叠的2x深色部分.如此..我以为我会使用CSS阴影，但是正如您在jsFiddle中所看到的那样，它也存在问题.

My actual goal is a little more complex, but if I can satify my first three bullet points then I can nail this task. Specifically, what I want to do is use two nested elements with background images of the right and left parts of a button image (rounded corners) so that I can use the same css to wrap a 'button' around text of any length. Since the backgrounds overlap in a css 'sliding doors' style, a png alpha drop shadow shows a 2x dark section where the images overlap. Soo.. I thought I'd use a css shadow, but as you can see in the jsFiddle, there are problems with that too.

有什么想法吗?

推荐答案

框阴影不会通过透明背景显示.一个更简单的测试用例将是:

Box-shadows don't show through transparent backgrounds. A more simple test case would be:

.box {
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: transparent;
  box-shadow: 0 0 10px #000;
}​

预期的输出将是一个很好的模糊的黑色正方形，对吗?好吧...不，这是一个带有阴影的白色正方形. http://jsfiddle.net/UjhrW/

The output expected would be a nice blurred black square right? Well... no, it's a white square with a dropshadow. http://jsfiddle.net/UjhrW/

要实现您想要的操作，您需要为阴影创建单独的标记，将其填充为白色，然后设置阴影的溢出部分，使其看起来像是模糊的正方形...

To achieve what you want to do you will need separate markup for the dropshadow, fill it with white, and then set the spill of the shadow so it looks like a blurry square...

.box {
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: #000;
  box-shadow: 0 0 10px 6px #000;
}​

http://jsfiddle.net/Etmty/

.box {
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: #000;
  box-shadow: 0 0 10px 6px #000;
}

<div class="box"></div>

这篇关于CSS盒子阴影+透明背景图像=直观分解的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！