Can you add a non-square drop shadow to PNG content with CSS? [duplicate]

问题

Is it possible to do a drop shadow on the content of a PNG?

Not a square, but an object drop shadow that
acts on the non-transparent content of the PNG.

回答1:

It's definitely possible.

Using filters, sample:

img { 
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter:         drop-shadow(5px 5px 5px #222); 
}

回答2:

It's not possible to do that in CSS. However, it's quite possible to do it through a canvas, but it will be somewhat inefficient (as it's processed by the client each time) and will be JavaScript dependent. Doing it in the PNG will be easier and will work on more browsers.

If you want more information about it, search the web for things like "html canvas blur" and "html canvas load image". Or better still, use the canvas shadow functionality which can do it all.

Here's an example: http://philip.html5.org/demos/canvas/shadows/various.html

create context from canvas
set context.shadow(Color|OffsetX|OffsetY|Blur) as desired
load PNG from img tag with context.drawImage
ah! the shadows!

And a bonus:

use context.toDataURL if you want to export to PNG (make a web app which you drop PNGs in and it gives you shadows!)

回答3:

How times change. It's now possible in some browsers, as shown in the currently accepted answer.

~~It's not possible to do this using CSS:~~

That's what I assume you're asking for.

回答4:

Until it will be available to CSS, you can try my approach.

My example uses this picture:

because it has a transparent background and it isn't square (for CSS's box-shadow to get into action). It's not very fancy, but serves this small and simple tutorial fine.

Next step I took was to create another image, based on the one above, to place it under the original.

Step1. Add blur:

Step2. Removed light and contrast:

So I have the original and the shadow.

Next I will display it as if it is a shadow:

Style:

.common {width: 100px;height: 100px;background-size: 100% 100%; position:absolute;}

.divOriginal {background-image: url(../img/original.png);top:2em;left:2em;z-index:10;}

.divShadow {background-image: url(../img/shadow.png);top: 3em;left: 2.5em;z-index:8;}

Do the magic:

Add one div and set attribute class="divOriginal common" and another one with class="divShadow common".

The result should be:

Cheers!

Adi

回答5:

I've wrote a jQuery plugin for this, based on Chris Morgan's suggestion about canvas. You can find it on GitHub here: https://github.com/Kukunin/image-shadow

回答6:

Use createjs sample can be found at JSFiddle

shadowTarget.shadow = shadow;

stage.addChild(shadowTarget);

shadowTarget.x = 500 / 2;
shadowTarget.y = 450 / 2;

shadowTarget.regX = shadowTarget.image.width/2;
shadowTarget.regY = shadowTarget.image.height/2;

来源：https://stackoverflow.com/questions/6441332/can-you-add-a-non-square-drop-shadow-to-png-content-with-css

标签

css

image

transparency

Shadow

css-filters