CSS CSS中PNG图像的投影

Question

提问by AntonAL

I have a PNG image, that has free form (non square).

我有一个 PNG 图像，它具有自由形式（非方形）。

I need to apply drop-shadow effect to this image.

我需要对这个图像应用阴影效果。

The standard approach ...

标准方法...

-o-box-shadow:      12px 12px 29px #555;
-icab-box-shadow:   12px 12px 29px #555;
-khtml-box-shadow:  12px 12px 29px #555;
-moz-box-shadow:    12px 12px 29px #555;
-webkit-box-shadow: 12px 12px 29px #555;
box-shadow:         12px 12px 29px #555;

... displays shadows for this image, like it is a square. So, I see my image and square shadow, that doesn't follows the form of object, displayed in image.

... 显示此图像的阴影，就像它是一个正方形。所以，我看到我的图像和方形阴影，它不遵循对象的形式，显示在图像中。

Is there any way to do it properly?

有没有办法正确地做到这一点？

Answer 1

回答by Dudley Storey

A little late to the party, but yes, it is totally possible to create "true" dynamic drop shadows around alpha masked PNGs, using a combination of dropshadow-filter (for Webkit), SVG (for Firefox) and DX filters for IE.

聚会有点晚了，但是是的，完全有可能在 alpha 蒙版 PNG 周围创建“真正的”动态阴影，使用 dropshadow-filter（对于 Webkit）、SVG（对于 Firefox）和 IE 的 DX 过滤器的组合。

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

<!-- HTML elements here -->

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

Some comparisons between true drop-shadow and box-shadowand an article on the technique I've just described.

真正的下拉阴影和箱阴影之间的一些比较，并在我刚刚描述的技术文章。

I hope this helps!

我希望这有帮助！

Answer 2

回答by Abdul

Yes, it is possible using filter: dropShadow(x y blur? spread? color?), either in CSS or inline:

是的，filter: dropShadow(x y blur? spread? color?)可以在 CSS 或内联中使用：

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

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png">

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png" style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);">

Answer 3

回答by psmears

If you have >100 images that you want to have drop shadows for, I would suggest using the command-line program ImageMagick. With this, you can apply shaped drop shadows to 100 images just by typing one command! For example:

如果您有超过 100 个要为其添加阴影的图像，我建议您使用命令行程序ImageMagick。有了这个，您只需输入一个命令就可以将形状投影应用于 100 张图像！例如：

for i in "*.png"; do convert $i '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage "shadow/$i"; done

The above (shell) command takes each .png file in the current directory, applies a drop shadow, and saves the result in the shadow/ directory. If you don't like the drop shadows generated, you can tweak the parameters a lot; start by looking at the documentation for shadows, and the general usage instructionshave a lot of cool examples of things that can be done to images.

上面的（shell）命令获取当前目录中的每个 .png 文件，应用阴影，并将结果保存在 shadow/ 目录中。如果你不喜欢生成的阴影，你可以调整很多参数；首先查看shadows的文档，一般使用说明有很多很酷的例子，可以对图像进行处理。

If you change your mind in the future about the look of the drop shadows - it's just one command to generate new images with different parameters :-)

如果您将来改变对阴影外观的看法 - 这只是生成具有不同参数的新图像的一个命令:-)

Answer 4

回答by Karl Horky

As Dudley mentioned in his answerthis is possible with the drop-shadow CSS filter for webkit, SVG for Firefox and DirectX filters for Internet Explorer 9-.

正如 Dudley 在他的回答中提到的，这可以通过 webkit 的 drop-shadow CSS 过滤器、Firefox 的 SVG 和 Internet Explorer 9 的 DirectX 过滤器实现。

One step further is to inline the SVG, eliminating the extra request:

更进一步的是内联 SVG，消除额外的请求：

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='drop-shadow'><feGaussianBlur in='SourceAlpha' stdDeviation='4'/><feOffset dx='12' dy='12' result='offsetblur'/><feFlood flood-color='rgba(0,0,0,0.5)'/><feComposite in2='offsetblur' operator='in'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></svg>#drop-shadow");
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

Answer 5

回答by Jaclyn U

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

That worked great for me. One thing to note tho in IE you need the full color (#222222) three characters don't work.

这对我很有用。需要注意的一件事在 IE 中您需要全彩色 (#222222) 三个字符不起作用。

Answer 6

回答by anupal

Add border with radius in you class if its a block. because by default shadow will apply on block border, even if your image have rounded corner.

如果它是一个块，则在您的类中添加带有半径的边框。因为默认情况下阴影将应用于块边框，即使您的图像有圆角。

border-radius: 4px;

change its border radius according to your you image corner. Hope this help.

根据您的图像角更改其边框半径。希望这有帮助。

Answer 7

回答by Mahmoud Zalt

Just add this:

只需添加这个：

-webkit-filter: drop-shadow(5px 5px 5px #fff);
 filter: drop-shadow(5px 5px 5px #fff);

example:

例子：

<img class="home-tab-item-img" src="img/search.png"> 

.home-tab-item-img{
    -webkit-filter: drop-shadow(5px 5px 5px #fff);
     filter: drop-shadow(5px 5px 5px #fff); 
}

Answer 8

回答by Dmitry Kaigorodov

Here is ready glow hover animation code snippet for this:

这是准备好的发光悬停动画代码片段：

http://codepen.io/widhi_allan/pen/ltaCq

-webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));

Answer 9

回答by Xitcod13

When i posted this originally it wasnt possible so this is the workaround. Now I simply suggest using other answers.

当我最初发布此内容时，这是不可能的，因此这是解决方法。现在我只是建议使用其他答案。

There is no way to get the outline of the image exactly but you can fake it with a div behind the image in the center.

没有办法准确地获得图像的轮廓，但您可以在图像的中心后面用一个 div 来伪造它。

If my trick doesn't work then you have to cut up the image and do it for every single of the little images. (the more images the more accurate the shadow will look) but for most images it looks alright with just one img.

如果我的技巧不起作用，那么您必须剪切图像并对每个小图像进行切割。（图像越多，阴影看起来就越准确）但对于大多数图像来说，只有一张 img 看起来就可以了。

what you need to do is to put a wrap div around your img like so

你需要做的是像这样在你的 img 周围放一个环绕的 div

<div id="imgWrap">
    <img id="img" scr="imgLocation">
</div>

then you put an empty divider inside the wrap (this will serve as the shadow)

然后你在包装内放一个空的分隔线（这将作为阴影）

<div id="imgWrap">
    <div id="shadow"> </div>
    <img id="img" scr="imgLocation">
</div>

and then you have to make the shadow appear behind the img with CSS:

然后你必须用 CSS 使阴影出现在 img 后面：

#img {
    z-index: 1;
}

#shadow {
    z-index: 0; /*make this value negative if doesnt work*/
    box-shadow: 0 -130px 180px 150px rgba(255, 255, 0, 0.6);
    width: 0;
    height: 0;
}

now position the imgWrap to position the original img... to center the shadow of the img you can mess with the first two values of the box-shadow making them negative.... or you can position the img and the shadow divs absolutely making img top and left values = 0 and the shadow div values = half of img width and height respectively.

现在定位 imgWrap 以定位原始 img... 将 img 的阴影居中，您可以混淆 box-shadow 的前两个值，使它们为负.... 或者您可以绝对定位 img 和阴影 div使 img 顶部和左侧值 = 0，阴影 div 值分别 = img 宽度和高度的一半。

If this looks horrid cut your img up and try again.

如果这看起来很糟糕，请剪掉您的 img 并重试。

(If you don't want the shadow behind the img just on the outline then you need to make your img opaque and make it act as if it was transparent which is not that hard and you can comment and I'll explain later)

（如果你不希望 img 后面的阴影只是在轮廓上，那么你需要让你的 img 不透明，让它看起来好像是透明的，这并不难，你可以发表评论，我稍后会解释）

Answer 10

回答by ido

In my case it had to work on modern mobile browsers, with a PNG image in different shapes and transparency. I created drop shadow using a duplicate of the image. That means I have two imgelements of the same image, one on top of the other (using position: absolute), and the one behind has the following rules applied to it:

就我而言，它必须适用于现代移动浏览器，具有不同形状和透明度的 PNG 图像。我使用图像的副本创建了投影。这意味着我有img同一张图片的两个元素，一个在另一个上面（使用position: absolute），后面的一个应用了以下规则：

.image-shadow {
  filter: blur(10px) brightness(-100);
  -webkit-filter: blur(10px) brightness(-100);
  opacity: .5;
}

This includes brightness filter in order to darken the bottom image, and a blur filter in order to cast the smudgy effect drop shadow usually has. Opacity at 50% is then applied in order to soften it.

这包括用于使底部图像变暗的亮度过滤器，以及用于投射阴影通常具有的污迹效果的模糊过滤器。然后应用 50% 的不透明度以软化它。

This can be applied cross browser using mozand msflags.

这可以使用moz和ms标志跨浏览器应用。

Example: https://jsfiddle.net/5mLssm7o/

示例：https: //jsfiddle.net/5mLssm7o/

CSS CSS中PNG图像的投影

提问by AntonAL

回答by Dudley Storey

回答by Abdul

回答by psmears

回答by Karl Horky

回答by Jaclyn U

回答by anupal

回答by Mahmoud Zalt

回答by Dmitry Kaigorodov

回答by Xitcod13

回答by ido

相关推荐

最近更新

标签

CSS CSS中PNG图像的投影

提问by AntonAL

回答by Dudley Storey

回答by Abdul

回答by psmears

回答by Karl Horky

回答by Jaclyn U

回答by anupal

回答by Mahmoud Zalt

回答by Dmitry Kaigorodov

回答by Xitcod13

回答by ido

相关推荐

CSS 将图标与文本对齐

如何在 CSS 中使用 3 位颜色代码而不是 6 位颜色代码？

CSS @font-face 无法在 IE 中正确显示

CSS 浮动多个li的左右

相关推荐

最近更新

标签