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

Question

提问by Damian

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

Is a header/banner background image in style.css, but not sure how to get a shadow around it...

是 style.css 中的标题/横幅背景图像，但不确定如何在其周围添加阴影...

I tried

我试过

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;
}

But that didn't work out...

但这并没有奏效...

Answer 1

回答by jolt

TL;DR:

特尔；博士：

In case you're satisfied with ~~WebKit~~Chrome only support, use CSS Filters.

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

In case you're satisfied with polyfilled CSS Canvas Context and Canvas, you can support Mozilla and WebKit browsers, though, Chrome will have no blur for it's shadow.

如果您对 polyfill CSS Canvas Context 和 Canvas 感到满意，您可以支持 Mozilla 和 WebKit 浏览器，不过，Chrome 的阴影不会模糊。

If you can recreate your image in SVG, and your targeted browser do support it, that's also a viable option. ^{Actually, this appears to be the best option in case you can get your background in SVG. Most major browsers show the same result, with the exception of Safari which appears to drop the filter.}

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

You can read below about the process of how the options did evolve.

您可以在下面阅读有关选项如何演变的过程。

Original answer:

原答案：

I doubt that what you're looking forward to is possible.

我怀疑你所期待的是可能的。

First of all, bodytakes up 100% height and 100% width of the page, the "outside" shadow of it will be always hidden.

首先，body占据页面的 100% 高度和 100% 宽度，它的“外部”阴影将始终隐藏。

If you set the property as follows:

如果您按如下方式设置该属性：

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

you should see the shadow, though, I doubt that's what you seek.

不过，您应该看到阴影，我怀疑这就是您所寻求的。

You could overcome the issue by wrapping the image in a new element, that's a child of bodyand is smaller than 100% of body's dimensions.

您可以通过将图像包装在一个新元素中来解决这个问题，该元素是的子元素body并且小于 100%body的尺寸。

Also, you may make body's dimensions smaller than 100%, though, I do not encourage to do so - it may break in some browsers and so on.

此外，您可以将body的尺寸设置为小于 100%，但我不鼓励这样做 - 它可能会在某些浏览器中中断等等。

My second guess, derived from that you're using a png, hence, transparent image, is that you wish to shadowthe image around it's filled pixel edges, leaving the transparent untouched. While it sounds like a cool idea to do, that's not what CSS does.

我的第二个猜测是，您使用的是png，因此，透明图像，是您希望shadow图像围绕其填充像素边缘，而保持透明不变。虽然这听起来是个很酷的主意，但这不是 CSS 所做的。

The property is called box-shadownot simply shadowso it already states that it won't be possible.

该属性box-shadow不是简单地被调用，shadow所以它已经声明它不可能。

I don't know if that's possible, but you could try using SVGand it's filters to do so. I'm no expert in SVG's - will not be able to provide example immediately (will look into it though).

我不知道这是否可能，但您可以尝试使用SVG它的过滤器来这样做。我不是 SVG 方面的专家 - 将无法立即提供示例（尽管会调查）。

One more possibility is to use canvasas backgroundfor your element, and apply the shadow programmatically (iterating through pixels and adding extra pixels).

另一种可能性是canvas用作元素的背景，并以编程方式应用阴影（遍历像素并添加额外的像素）。

Update:Didn't know that Canvas is smart enough to shadow through transparent images, the programmatical part is not necessary.

更新：不知道 Canvas 足够智能，可以通过透明图像进行阴影处理，编程部分不是必需的。

Keep in mind, that the last 2 variants will most definitely be poorly supported by browsers.

请记住，浏览器对最后两个变体的支持肯定很差。

Updates:

更新：

CSS Filters:

CSS 过滤器：

Okay, there is one more possibility - CSS filters, though, as of writing, they are supported only by WebKit. ~~Not sure actually if they work in all of WebKit browsers (Safari, Opera, Chrome), but they do in Chrome.~~

好吧，还有一种可能性 - CSS 过滤器，不过，在撰写本文时，它们仅受 WebKit 支持。~~实际上不确定它们是否适用于所有 WebKit 浏览器（Safari、Opera、Chrome），但它们适用于 Chrome。~~

Checking with latest Safari for Windows, Opera and Chrome, proves, that the property only works on Chrome.

使用适用于 Windows、Opera 和 Chrome 的最新 Safari 进行检查，证明该属性仅适用于 Chrome。

There is one "but", it is not supported on body either (jsfiddle.net), and I think that all of the cool stuff has left the bodybehind.

有一个“但是”，它也不支持 body (jsfiddle.net)，我认为所有很酷的东西都被body抛在了后面。

In case of child node, it works (jsfiddle.net)!

在子节点的情况下，它可以工作（jsfiddle.net）！

P.S. Eventually, we may see CSS filters implemented in every browser. That makes this the best option for such functionality.

PS 最终，我们可能会看到在每个浏览器中都实现了 CSS 过滤器。这使其成为此类功能的最佳选择。

Canvas:

帆布：

Update:

更新：

I did some experiments with canvas. In general, it's a success and even works for body: http://jsfiddle.net/psycketom/3VBMJ/4/.

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

Though, I couldn't manage to make the shadowBlurproperty work. Might be it doesn't work on CSS Canvas Context.

虽然，我无法设法使shadowBlur财产正常工作。可能它不适用于 CSS Canvas Context。

And, Firefox natively doesn't support cssCanvasContext, so the ~~-moz-background~~(It's actually -moz-element, but since there is no cssCanvasContext, it still fails) property is ignored. I think that could be hacked with an off-screen canvas.

并且，Firefox 本身不支持 cssCanvasContext，因此~~-moz-background~~（实际上是-moz-element，但由于没有 cssCanvasContext，它仍然失败）属性被忽略。我认为这可以通过屏幕外画布进行破解。

Update 2:

更新 2：

The shadowBlurproperty works on Safari, doesn't on Chrome.

该shadowBlur属性适用于 Safari，不适用于 Chrome。

Update 3:

更新 3：

http://jsfiddle.net/psycketom/3VBMJ/6/I did a test with off-screen canvas, but couldn't hack it together. I'm giving it a bit more of my time at the moment.

http://jsfiddle.net/psycketom/3VBMJ/6/我用离屏画布做了一个测试，但不能一起破解。我现在给它更多的时间。

Update 4:

更新 4：

Off-screen canvas does work in Firefox - http://jsfiddle.net/psycketom/3VBMJ/12/, but, doesn't work in Webkit.
A dynamically generated canvas also does it, though, it has to be appended, and hidden afterwards.

离屏画布在 Firefox 中确实有效 - http://jsfiddle.net/psycketom/3VBMJ/12/，但在 Webkit 中无效。
动态生成的画布也可以这样做，但是必须附加它，然后隐藏它。

Update 5 (worth to check):

更新 5（值得检查）：

I did a dirty polyfill, now, the Canvas background gets supported in both - Webkit and Mozilla browsers.

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

Update 6:

更新 6：

I did a quick compatibility test - Chrome (27.0.1453.116 m) works, Firefox (22.0) works, Safari (for Windows, 5.1.7 7534.57.2) works.

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

As for... IE (10.0.9200.16618) doesn't work, Opera (12.14 1738) doesn't work.

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

SVG:

SVG：

First of all, SVG requires that you create your image in vectors.

首先，SVG 要求您在矢量中创建图像。

Update:

更新：

Oh boy, oh boy... SVG... http://jsfiddle.net/psycketom/3VBMJ/18/. This is not really an background image, it's just SVG poured inside the HTML, and it's container element has pointer-events: noneapplied to it, to disable any mouse input.

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

Works in both, Firefox and Chrome, and probably others because it depends on SVG that is a bit more supported than CSS3/HTML5. Keep in mind though, that some parts of SVG are not supported, filters, possibly, being one of them.

可在 Firefox 和 Chrome 中使用，可能还有其他版本，因为它依赖于比 CSS3/HTML5 更受支持的 SVG。但请记住，不支持 SVG 的某些部分，过滤器可能就是其中之一。

Update 2:

更新 2：

By pouring everything what we had as inline html before into a file of it's own, we can use SVG as background-image. Checked in Chrome and Fox - works in both.

通过将我们之前作为内联 html 的所有内容倒入它自己的文件中，我们可以将SVG 用作background-image. 在 Chrome 和 Fox 中检查 - 两者都适用。

Update 3:

更新 3：

I did a quick compatibility test - Chrome (27.0.1453.116 m) works, Firefox (22.0) works, IE (10.0.9200.16618) works, Opera (12.14 1738) works.

我做了一个快速的兼容性测试 - Chrome (27.0.1453.116 m) 工作，Firefox (22.0) 工作，IE (10.0.9200.16618) 工作，Opera (12.14 1738) 工作。

As for Safari (for Windows, 5.1.7 7534.57.2) - it works, but doesn't display shadow at all.

至于 Safari（对于 Windows，5.1.7 7534.57.2） - 它可以工作，但根本不显示阴影。

This is what I meant with child element:

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

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

Additional information:

附加信息：

http://jsfiddle.net/psycketom/3VBMJ/17/it appears, that the shadowBlurin Chrome is supported in general (the red box), but it lacks support for PNG's (smiley).

http://jsfiddle.net/psycketom/3VBMJ/17/看来，shadowBlurChrome 一般支持（红色框），但它缺乏对 PNG 的支持（笑脸）。

I'm confused, now, is it because of the recent switch to Blink or it has never been supported in Chrome?

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

Answer 2

回答by dba

The first value is for the horizontal offset, the second for the vertical. the third describes the blur radius and the last the spread radius.

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

But ithink it works if you only define blur and spread, too.

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

What browser do you using?

你用什么浏览器？

have you tried

你有没有尝试过

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

Answer 3

回答by Ritabrata Gautam

first you cant create a shadow behind <body>tag
to have shadow in your webpage you need to create a container using div or a table data inside your data by using <div class="x">your data</div>or <table><tr><td class="x">your data</td></tr></table>
now use class x to give shadow
now for <div>your code will be like

首先你不能在<body>标签后面创建阴影
要在您的网页中添加阴影，您需要使用 div 或数据中的表数据创建一个容器，方法是使用<div class="x">your data</div>或<table><tr><td class="x">your data</td></tr></table>
现在使用类 x 给予阴影
现在<div>你的代码会像

.x{
webkit-box-shadow: 0px 0px 10px 7px #606060;
moz-box-shadow: 0px 0px 10px 7px #606060;
box-shadow: 0px 0px 10px 7px #606060;
}

。X{
webkit-box-shadow: 0px 0px 10px 7px #606060;
moz-box-shadow: 0px 0px 10px 7px #606060;
框阴影：0px 0px 10px 7px #606060;
}

now for <table>your code will be like

现在<table>你的代码会像

td.x{
webkit-box-shadow: 0px 0px 10px 7px #606060;
moz-box-shadow: 0px 0px 10px 7px #606060;
box-shadow: 0px 0px 10px 7px #606060;
}

td.x{
webkit-box-shadow: 0px 0px 10px 7px #606060;
moz-box-shadow: 0px 0px 10px 7px #606060;
框阴影：0px 0px 10px 7px #606060;
}

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

提问by Damian

回答by jolt

TL;DR:

特尔；博士：

Original answer:

原答案：

Updates:

更新：

CSS Filters:

CSS 过滤器：

Canvas:

帆布：

Update:

更新：

Update 2:

更新 2：

Update 3:

更新 3：

Update 4:

更新 4：

Update 5 (worth to check):

更新 5（值得检查）：

Update 6:

更新 6：

SVG:

SVG：

Update:

更新：

Update 2:

更新 2：

Update 3:

更新 3：

This is what I meant with child element:

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

Additional information:

附加信息：

回答by dba

回答by Ritabrata Gautam

相关推荐

CSS 是否可以使用 CSS3 绘制对角线？

CSS LESS：从变量中减去

仅 CSS 框阴影底部

CSS Bootstrap 折叠菜单链接在移动设备上不起作用

相关推荐

最近更新

标签