如何在背景图像周围创建阴影

Question

background: url("images/main_bg.png") repeat;

是style.css中的标题/横幅背景图片,但不知道如何在它周围获得阴影......

我试过了

body {
    font-family: Arial,Helvetica,sans-serif;    
    font-size: 13px;
    color: #333333;
    background: url("images/main_bg.png") repeat;
    box-shadow: 0 0 5px 2px #282a2d;
    line-height: 1.4;
}

但那没有成功......

Answer 1

TL; DR:

如果您对WebKit Chrome仅支持感到满意,请使用CSS过滤器.

如果您对polyfilled CSS Canvas Context和Canvas感到满意,那么您可以支持Mozilla和WebKit浏览器,但Chrome不会模糊它的影子.

如果您可以在SVG中重新创建图像,并且您的目标浏览器确实支持它,那么这也是一个可行的选择.^{实际上,这似乎是最好的选择,以防您获得SVG的背景.大多数主流浏览器显示相同的结果,但Safari似乎会删除过滤器.}

您可以在下面阅读有关选项如何发展的过程.

原始答案:

我怀疑你期待的是可能的.

首先,body占据页面的100%高度和100%宽度,它的"外部"阴影将始终隐藏.

如果您按如下方式设置属性:

box-shadow: inset 0 0 5px 2px #282a2d; /* mark the inset */

你应该看到影子,但我怀疑这是你所寻求的.

你可以通过将图像包装在一个新元素中来克服这个问题,这个元素是一个孩子,body并且小于100%body的维度.

此外,您可能会将body尺寸小于100%,但我不鼓励这样做 - 在某些浏览器中可能会破坏等等.

我的第二个猜测,源于你正在使用一个png透明图像,你希望shadow它周围的图像填充像素边缘,保持透明不变.虽然这听起来很酷,但这不是CSS的作用.

该属性被称为box-shadow不仅仅是shadow因为它已经声明它是不可能的.

我不知道这是否可能,但你可以尝试使用SVG它的过滤器来做到这一点.我不是SVG的专家 - 无法立即提供示例(虽然会调查它).

另一种可能性是canvas用作元素的背景,并以编程方式应用阴影(迭代像素并添加额外的像素).

更新:不知道Canvas足够智能透过透明图像,程序部分是不必要的.

请记住,最后两个变体绝对不会受到浏览器的支持.

更新:

CSS过滤器:

好的,还有一种可能性 - CSS过滤器,但在编写时,它们仅受WebKit支持.实际上不确定它们是否适用于所有WebKit浏览器(Safari,Opera,Chrome),但它们适用于Chrome.

检查最新的Safari for Windows,Opera和Chrome,证明该属性仅适用于Chrome.

有一个"但是",身体也不支持(jsfiddle.net),我认为所有很酷的东西都body落后了.

在子节点的情况下,它工作(jsfiddle.net)!

PS最终,我们可能会在每个浏览器中看到CSS过滤器.这使得这是此类功能的最佳选择.

帆布:

更新:

我用帆布做了一些实验.一般来说,它是成功的,甚至适用于body:http://jsfiddle.net/psycketom/3VBMJ/4/.

虽然,我无法使shadowBlur财产发挥作用.可能它不适用于CSS Canvas Context.

并且,Firefox本身不支持cssCanvasContext,因此-moz-background(实际上-moz-element,但由于没有cssCanvasContext,它仍然失败)属性被忽略.我认为可以用屏幕外的画布进行黑客攻击.

更新2:

该shadowBlur属性适用于Safari,不适用于Chrome.

更新3:

http://jsfiddle.net/psycketom/3VBMJ/6/我用屏幕外画布进行了测试,但无法将它们整合在一起.我现在正在给它更多的时间.

更新4:

离屏画布在Firefox中可以正常工作 - http://jsfiddle.net/psycketom/3VBMJ/12/,但是,在Webkit中不起作用.
动态生成的画布也会这样做,但必须追加它,然后隐藏它.

更新5(值得检查):

我做了一个脏的polyfill,现在,Canvas背景在Webkit和Mozilla浏览器中得到支持.

更新6:

我做了一个快速的兼容性测试 - Chrome(27.0.1453.116米)工作,Firefox(22.0)工作,Safari(Windows,5.1.7 7534.57.2)工作.

至于... IE(10.0.9200.16618)不起作用,Opera(12.14 1738)不起作用.

SVG:

首先,SVG要求您在向量中创建图像.

更新:

哦,男孩,哦,男孩...... SVG ...... http://jsfiddle.net/psycketom/3VBMJ/18/.这不是一个真正的背景图像,只是SVG在HTML内部,并且它的容器元素已经pointer-events: none应用于它,以禁用任何鼠标输入.

适用于Firefox和Chrome,以及其他可能因为它依赖于比CSS3/HTML5更受支持的SVG.但请记住,SVG的某些部分不受支持,过滤器可能是其中之一.

更新2:

通过将我们所拥有的内联html之前的所有内容倾注到它自己的文件中,我们可以使用SVG作为background-image.检查Chrome和Fox - 两者兼容.

更新3:

我做了一个快速的兼容性测试 - Chrome(27.0.1453.116米)正常工作,Firefox(22.0)工作,IE(10.0.9200.16618)工作,Opera(12.14 1738)工作.

至于Safari(适用于Windows,5.1.7 7534.57.2) - 它可以工作,但根本不显示阴影.

这就是我对子元素的意思:

http://jsfiddle.net/psycketom/3VBMJ/21/

附加信息:

http://jsfiddle.net/psycketom/3VBMJ/17/看来,shadowBlurChrome中一般支持(红色框),但它缺乏对PNG(笑脸)的支持.

我很困惑,现在,是因为最近切换到Blink还是从未在Chrome中支持过？

Answer 2

第一个值用于水平偏移，第二个值用于垂直偏移。第三个描述模糊半径，最后一个描述扩散半径。

但我认为如果你只定义模糊和扩散，它也是有效的。

您使用什么浏览器？

你有没有尝试过

-moz-box-shadow:    0px 0px 5px 2px #282a2d;
-webkit-box-shadow: 0px 0px 5px 2px #282a2d;