使用 HTML5 和 CSS 创建多个背景并保持标记语义的最佳方法是啥？
Posted
技术标签:
【中文标题】使用 HTML5 和 CSS 创建多个背景并保持标记语义的最佳方法是啥？【英文标题】：What's the best way to create multiple backgrounds using HTML5 and CSS and keep markup semantic?使用 HTML5 和 CSS 创建多个背景并保持标记语义的最佳方法是什么？ 【发布时间】：2011-11-09 01:55:09 【问题描述】：使用 html5 和 CSS 创建多个背景并保持标记语义的最佳方法是什么？我意识到 CSS3 支持多种背景，但我也想使用渐变，并且对实际如何完成这一点很感兴趣——而不仅仅是它的理论。
传统的方法可能是这样的：
<div class="background-outer">
<div class="background-inner">
<article class="exiting-news">
<p>We'll talk about something exciting here</p>
</article>
<div>
</div>
我想要一种跨浏览器友好且不涉及 javascript 或 ASP.net/php 等中的任何编程工作的方法
这可能只是使用更多语义类名的情况，但我很难过！
注意：可能已经有人回答了这个问题，但是很难搜索，如果重复，请道歉！
【问题讨论】：
【参考方案1】：这取决于是个人项目还是客户项目。嵌套 div 不会伤害任何人，它们在所有浏览器中都快速且可靠。如果是给别人用，不要害羞。
否则，您将不得不放弃对某些浏览器的支持。在 CSS 中使用多个背景是一种方法。我有时使用的第二种方法是，根据您有多少背景，将position:relative 主块和position:absolute :before 和:after 元素填充它并在它们上设置背景。基本上适用于所有浏览器。
编辑：
我使用的伪元素技巧的验证代码示例：
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<style>
div:before
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
div:after
background: -moz-linear-gradient(left, rgba(239,47,47,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
background: -webkit-linear-gradient(left, rgba(239,47,47,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
div background: url(http://www.google.co.uk/images/srpr/logo3w.png); position: relative; margin: 1em; min-height: 10em;
div:after, div:before content: " "; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
div > * position: relative; z-index:1
</style>
<div>
<h1>This div has three backgrounds</h1>
<p>Its content has to be wrapped, but that's not normally a 'semantic' problem.
</div>
【讨论】：
我喜欢这个答案，谢谢！接受 - 是否有机会使用 :before & :after 给出第二个选项的代码示例 完成。你牺牲了一点 CSS 的清洁度来换取更整洁的标记，或者你牺牲了一些额外的 div 来换取干净的 CSS，或者你放弃了旧的浏览器。在他们之间，这些是您的选择。以上是关于使用 HTML5 和 CSS 创建多个背景并保持标记语义的最佳方法是啥？的主要内容，如果未能解决你的问题，请参考以下文章
css 超简单的jQuery背景图像随机幻灯片（使用CSS3进行转换，并通过HTML5`data`属性获取图像路径）。
CSS：如何使背景图像的高度为100％，并保持纵横比[重复]