在CSS中为PNG图像投影

Question

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

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

标准方法......

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

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

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

Answer 1

派对有点晚了，但是，完全有可能在alpha遮罩的PNG周围创建“真正的”动态阴影，使用了Drophadow-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-shadow和an article on the technique I've just described。

我希望这有帮助！

Answer 2

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

没有办法准确地获得图像的轮廓，但你可以用中间图像后面的div伪造它。

如果我的技巧不起作用那么你必须剪切图像并为每一个小图像做。（图像越多，阴影看起来就越准确），但对于大多数图像来说，只需一个图像即可。

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

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

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

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

然后你必须使用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;
}

现在定位imgWrap来定位原始的img ...以使img的阴影居中你可以弄乱盒子阴影的前两个值使它们变为负面....或者你可以绝对定位img和shadow divs使img top和left值= 0，阴影div值分别为img width和height的一半。

如果这看起来很可怕，请将你的img剪掉并再试一次。

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

Answer 3

有一个建议的功能，您可以使用任意形状的阴影。你可以在这里看到它，由Lea Verou提供：

http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom

但浏览器支持很少。

Answer 4

使用css是不可能的 - 图像是正方形，因此阴影将是正方形的阴影。最简单的方法是使用photoshop / gimp或任何其他图像编辑器来应用像核心绘制一样的阴影。

Answer 5

我经常使用的一个技巧，当我只需要“一点”阴影（读取：轮廓不能超精确）时，在图像下放置一个径向填充100％-black-to-100％-transparent的DIV。 DIV的CSS看起来像：

.shadow320x320{    
        background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.58) 1%, rgba(0,0,0,0) 43%, rgba(0,0,0,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.58)), color-stop(1%,rgba(0,0,0,0.58)), color-stop(43%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
        background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Opera 12+ */
        background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* IE10+ */
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  }

这将在320x320 DIV上创建一个圆形的黑色淡出“点”。如果缩放DIV的高度或宽度，则会得到相应的椭圆。非常好的创建例如瓶子或其他圆柱状形状下的阴影。

这里有一个绝对令人难以置信的超级优秀工具来创建CSS渐变：

http://www.colorzilla.com/gradient-editor/

ps：使用时进行礼貌的广告点击。（并且，不，我没有附属它。但礼貌点击应该成为一种习惯，特别是对于你经常使用的工具......只是说...因为我们都在网上工作...... ）

Answer 6

也许你正在寻找这个。 http://lineandpixel.com/blog/png-shadow

img { png-shadow: 5px 5px 5px #222; }

Answer 7

您无法在所有浏览器中可靠地执行此操作。从IE10 +开始，Microsoft不再支持DX过滤器，因此这里没有一个解决方案可以完全运行：

https://msdn.microsoft.com/en-us/library/hh801215(v=vs.85).aspx

在所有浏览器中可靠运行的唯一属性是box-shadow，这只是将边框放在元素上（例如div），从而产生方形边框：

box-shadow：horizontalOffset verticalOffset blurDistance spreadDistance color inset;

EG

box-shadow: -2px 6px 12px 6px #CCCED0;

如果您碰巧有一个“正方形”但具有均匀圆角的图像，则投影与border-radius一起使用，因此您可以始终在div中模拟图像的圆角。

这是box-shadow的Microsoft文档：

https://msdn.microsoft.com/en-us/library/gg589484(v=vs.85).aspx

Answer 8

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

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 9

如果您想要有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

上面的（shell）命令获取当前目录中的每个.png文件，应用投影，并将结果保存在shadow /目录中。如果你不喜欢生成的阴影，你可以调整很多参数;从查看documentation for shadows开始，一般的usage instructions有许多可以对图像做的很酷的例子。

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

Answer 10

正如Dudley在his answer中所提到的，这可以通过用于webkit的drop-shadow CSS过滤器，用于Firefox的SVG和用于Internet Explorer 9的DirectX过滤器来实现。

更进一步的是内联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 11

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

这对我来说很有用..有一件事要注意，你需要全彩色（＃222222）三个字符不起作用。

Answer 12

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

border-radius: 4px;

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

Answer 13

只需添加：

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

例：

<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 14

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

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

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

Answer 15

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

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

这包括亮度滤镜以使底部图像变暗，以及模糊滤镜以投射通常具有的阴影效果。然后施加50％的不透明度以使其软化。

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

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

在CSS中为PNG图像投影

问题描述投票：170回答：15

15个回答

最新问题

在CSS中为PNG图像投影

问题描述 投票：170回答：15

15个回答

最新问题

问题描述投票：170回答：15