【问题标题】:JavaScript, html5: how to dynamically create a Vignette effect?JavaScript、html5:如何动态创建晕影效果?
【发布时间】:2011-06-12 17:12:41
【问题描述】:

所以我需要的很简单:用户按下某些东西,用户会看到所有页面顶部的新 div 上的 Vignette 效果(与页面大小相同)

是否可以使用一些 html5 画布艺术?以及如何做到这一点?

【问题讨论】:

  • 如果你真的在谈论支持 HTML5 的浏览器,你可能不需要画布就可以做到这一点。您只需要一个(或两个)带有一些广泛模糊的框阴影的圆角框。

标签: javascript html canvas effects vignette


【解决方案1】:

嗯,这正是 Chrome 的设置页面是这样做的:http://jsfiddle.net/JRGHM/

.overlay {
  -webkit-box-align: center;
  -webkit-box-pack: center;
  -webkit-transition: 0.25s opacity;
  background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5),
                                      rgba(127, 127, 127, 0.5) 35%,
                                      rgba(0, 0, 0, 0.7));
  bottom: 0;
  display: -webkit-box;
  left: 0;
  padding: 20px;
  padding-bottom: 130px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}

如您所见,重要的部分是渐变。

您可以通过添加适当的渐变语法使该代码在所有支持 CSS3 渐变的浏览器中运行:http://caniuse.com/#feat=css-gradients

【讨论】:

  • 是的,可以。这就是我所做的,但是一旦我看到它是如何做到的并且它被称为.overlay,我认为从源头获取它会更清楚。
  • 当然,我只是想说明一下,以防有人想知道如何找出答案。
  • @Kabumbus:看起来不错!这是一个修复了98%s 的版本:jsfiddle.net/XHAbV/2
猜你喜欢
  • 2021-04-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-11-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-01-05
相关资源
最近更新 更多