HTML5 背景视频 - 使其他内容像素化/颗粒化
我正在尝试使用 HTML5 的视频标签制作一个带有视频背景的网站。我还尝试使用 jQuery 插件 (http://plugins.jquery.com/project/videoBG)。我让视频加载并正常工作,但每次它都会使其他内容显得颗粒状/像素化。是否有办法将项目放置在视频背景之上而不让它们显得颗粒状/像素化?
您可以看到我创建的页面。代码相当简单,所以我不会在这里包含它。
带视频:http://createinform.com/test4.html 没有视频: http://createinform.com/test3.html
您会注意到徽标和文本每个页面看起来都不同,但它们都使用保存 CSS 规则。先感谢您!
干杯, 埃文
I am trying to make a website with a video background using HTML5's video tag. I also tried using a jQuery plugin (http://plugins.jquery.com/project/videoBG). I got the video to load and work properly, but every time it makes other content appear grainy/pixelated. Is there anyway to place items on top of the video background and not have them appear grainy / pixelated?
You can see the pages I've created. The code is fairly simple, so I won't include it here.
With Video: http://createinform.com/test4.html
Without Video: http://createinform.com/test3.html
You'll notice that the logo and text look different from page to page, but they are using the save CSS rules. Thank you in advance!
Cheers,
Evan
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这似乎是Chrome 的一个已知问题。我在 Firefox (5.0)、IE (9) 和 Opera (10) 中尝试了相同的两个页面,但我无法分辨渲染的差异。
编辑:我还在 Safari (5.0.1/Windows) 中尝试了这两个页面,渲染效果看起来更差。所以,也许这是一个 webkit 问题。
This seems to be a known issue with Chrome. I tried the same two pages in Firefox (5.0), IE (9), and Opera (10), and I couldn't tell the difference in the rendering.
EDIT: I also tried the two pages in Safari (5.0.1/Windows), and the rendering looks even worse there. So, perhaps it's a webkit issue.
Chrome 错误的一部分是,您的徽标图像比实际显示的要大,并且通过 CSS 缩小了。
使用正确大小的图像可以消除任何徽标问题。
下面的文本在两个版本中都呈现良好(chrome 14.0.797.0 m)
A part the Chrome bug, your logo image is bigger than it appears, and is scaled down via CSS.
Using a correctly sized image would remove any logo issue.
The text below renders fine in both version BTW (chrome 14.0.797.0 m)