作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以我需要的很简单:用户按下某些东西,用户会在所有页面(具有页面大小)顶部的新 div 上看到 Vignette 效果,类似
是否可以使用一些 html5 Canvas 艺术?以及如何做这样的事情?
最佳答案
好吧,正是 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
关于JavaScript,html5 : how to dynamically create a Vignette effect?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6323316/
我是一名优秀的程序员,十分优秀!