JavaScript,html5:如何动态创建Vignette效果？

Question

所以我需要的是简单的:用户按下某些内容,用户在所有页面顶部(页面大小)上看到对新div的Vignette效果

是否可以使用一些html5画布艺术？怎么做这样的事情？

Answer 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