【问题标题】:Best way of achieving this background vignetting effect?实现这种背景渐晕效果的最佳方法是什么?
【发布时间】:2011-08-02 14:17:49
【问题描述】:

我想在我正在构建的页面的背景上添加渐晕效果。这是页面: www.karolinadahl.se

我设法在 Firefox 中获得了我正在寻找的效果,而且它似乎工作正常。在 Safari 中,我得到了某种渐晕,虽然不是我想要的,并且由于某种原因,插入的阴影会极大地减慢页面速度。我正在使用 Safari 5。

我认为它在资源管理器中根本不起作用,我不了解 Chrome 和 Opera。

有没有更聪明的方法可以在背景上实现这种效果?

【问题讨论】:

  • 这很奇怪,我在 Firefox 5 和 6 中看到它。可能是我的主机,我整天都遇到问题,我的更改没有显示,css 只读取了部分等。稍后再试请:)

标签: css background shadow vignette


【解决方案1】:

您正确地应用了效果,但是,这些效果是

  • 不完全支持,这解释了您的 IE 问题
  • 已知不同浏览器的呈现方式不同

不过,时间在你身边。支持只会改善。对于仍在开发中的网站,我会说坚持使用 CSS3 技术,而不是旧的、更hackier 的解决方案。

您也可以尝试gradient in the background。可能更一致。

【讨论】:

  • 谢谢。可以更一致地完成,例如,在常规背景之上的径向渐变背景?径向渐变将从中心的 80% 黑色变为 0%。这样的事情可能吗?
  • 据我所知,确实如此。有关如何生成标记的示例,请参阅 here
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-06-15
  • 1970-01-01
相关资源
最近更新 更多