HTML/CSS - 在图像上创建 alpha 蒙版
我想在我正在构建的网站中创建一种效果,其中图像被覆盖层遮盖。叠加层应该创建一个“淡出”效果 - 我实际上并不想要任何动画,但叠加层应该使图像看起来好像在边缘淡入背景颜色。
像这样的事情: https://i.sstatic.net/ZTKTa.png
我更喜欢这样做这与 CSS/HTML/JS - 而不是图像。有什么想法从哪里开始吗?谢谢。
I'd like to create an effect in a site I’m building where an image is masked by an overlay. The overlay should create a “fade out” effect — I don’t actually want anything animated, but the overlay should make the image look as if it’s fading to the background colour at the edges.
Something like this: https://i.sstatic.net/ZTKTa.png
I prefer to do this with CSS/HTML/JS - not images. Any thoughts on where to start? Thanks.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
你可以这样做,例如: 示例
html
CSS
you could do something like this for example : Example
html
CSS
啊 - 根据你对 antyrat 答案的评论,你最好的选择是创建一个包含效果的 PNG 图像(即半透明的白色形状),并使用 CSS 将其放置在实际图像的顶部(
position :absolute
和z-index
都会涉及到)。目前,您无法单独使用 HTML 和 CSS 创建非方形形状。
Ah — based on your comment on antyrat’s answer, your best bet is to create a PNG image that contains the effect (i.e. a semi-transparent white shape), and position it over the top of your actual image using CSS (
position:absolute
andz-index
will be involved).You can’t currently create non-square shapes using HTML and CSS alone.
我知道您专门要求 CSS/JavaScript 解决方案,并且我相信您有自己的理由。
尽管如此,我只是想扔掉单个褪色图像文件的简单解决方案,就像您已经在问题中发布的那样,没有花哨的编程效果。
I know that you are asking specifically for a CSS/JavaScript solution, and I'm sure you have your reasons.
Nevertheless, I just wanted to throw out the simple solution of a single faded image file like you already posted in your question with no fancy programmed effects.
从 jQuery 开始。例如,请参阅 fadeIn 函数。
对于图像上的静态 alpha 蒙版,请使用 opacity css 属性:
Start with jQuery. For example see fadeIn function.
For static alpha mask over image use opacity css property:
jQuery
animate
函数(具有不透明度)应该/也许能够处理这个问题,尽管如果您只是淡入叠加层,antyrat 的答案也应该有效。The jQuery
animate
function (with opacity) should/may be able to handle that, though antyrat's answer should work as well if you simply fadein the overlay.