blocks|key|5467105|text|如果您将图像加载到画布上下文中，则可以做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5467106|这里有很好的干净源码：|5467107|http://philip.html5.org/demos/canvas/shadows/various.html|offset|length|5467108|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1L|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@$F|R|G|S|1|T]]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|E]]]]

If you load the image in to a canvas context you can do this.

good clean source here:

<a href="http://philip.html5.org/demos/canvas/shadows/various.html" rel="nofollow">http://philip.html5.org/demos/canvas/shadows/various.html</a>

blocks|key|1961652|text|是!在CSS3中可以在透明的.png上做阴影！我需要在一个在IE10中像垃圾一样显示的项目中使用它。不使用长方体阴影，而是使用filter:+drop-shadow()。语法几乎是一样的。这是一篇文章：link|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1961653|最后的解决方案是(以防链路中断)：|1961654|.filter-drop-shadow+{
++-webkit-filter:+drop-shadow(0+1px+2px+rgba(0,0,0,.5));
++-moz-filter:+drop-shadow(0+1px+2px+rgba(0,0,0,.5));
++-ms-filter:+drop-shadow(0+1px+2px+rgba(0,0,0,.5));
++-o-filter:+drop-shadow(0+1px+2px+rgba(0,0,0,.5));
++filter:+drop-shadow(0+1px+2px+rgba(0,0,0,.5));
}|code-block|syntax|javascript|1961655|entityMap|0|LINK|mutability|MUTABLE|url|http://bricss.net/post/33158273857/box-shadow-vs-filter-drop-shadow^0|2T|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

YES! It's possible to do shadows on a transparent .png in CSS3! I needed this in one project that was displaying like junk in IE10. Instead of using box-shadow, use filter: drop-shadow(). The syntax is pretty much the same. Here's the article: <a href="http://bricss.net/post/33158273857/box-shadow-vs-filter-drop-shadow" rel="nofollow">link</a>

The final solution is this (in case the link breaks):

<pre><code>.filter-drop-shadow {
 -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
 -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
 -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
 -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
 filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
</code></pre>

blocks|key|945537|text|我知道使用GD+PHP库是可能的。请查看此教程：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|945538|http://www.codewalkers.com/c/a/Miscellaneous/Adding-Drop-Shadows-with-PHP/|offset|length|945539|我猜使用PHP解决方案将是跨浏览器兼容性最好的。|945540|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|22|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

I know it's possible using the GD PHP library. Check out this tutorial:

<a href="http://www.codewalkers.com/c/a/Miscellaneous/Adding-Drop-Shadows-with-PHP/" rel="nofollow">http://www.codewalkers.com/c/a/Miscellaneous/Adding-Drop-Shadows-with-PHP/</a>

I would guess that using a PHP solution would be the most compatible across browsers.

blocks|key|944987|text|CSS不知道图像的形状，因此无法确定轮廓，也无法对其应用阴影。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|944988|您可以创建图像的黑色副本，并使用z索引、方向偏移和一些不透明度将其放在其后面。事情就是这样。|944989|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

CSS has no idea what the shape of the image is, therefore cannot determine the outline and cannot apply a shadow to it.

You can create a black copy of the image and place it behind it, using z-index, directional offsets and some opacity. That's about it.

blocks|key|945530|text|不不可能。即使背景是透明的，您的图像仍然是一个矩形，阴影将应用于周围的边框。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|945531|你能做的就是直接在png中放置一个图形阴影。这在透明的背景下工作得很好。|945532|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

No it is not possible. Even when the background is transparent, your image is still a rectangle and the shadow will be applied to the border around.

What you can do is putting a graphical shadow directly in the png. That works out great over a transparent background.

Anyone know if its possible to yet create a css based drop shadow on transparent background PNG image?

Perhaps with CSS3,jquery or lastly server side?

Example after effect of what I am trying to acheive : 

<img src="https://i.stack.imgur.com/1Zz9Q.png" alt="Example">

Pretty sure if it is possible it wouldn't be cross browser but willing to apply if it degrades well?

Feel free to add you input , open techniques discussion ..

Possible to create a css shadow on transparent background PNG image?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

有没有人知道是否有可能在透明的背景PNG图像上创建一个基于css的投影？也许使用CSS3、jquery或最后的服务器端？我正在尝试获得的效果后的示例：​​我很确定它是否有可能不是跨浏览器的，但如果它降级很好的话，愿意申请吗？请随时添加您的输入，打开技术讨论..

问可以在透明背景PNG图像上创建css阴影吗？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以在透明背景PNG图像上创建css阴影吗？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以在透明背景PNG图像上创建css阴影吗？
EN