使用 HTML5 和 CSS 创建多个背景并保持标记语义的最佳方法是什么？

发布于 2024-12-02 12:45:35 字数 538 浏览 1 评论 0原文

使用 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 等中的任何编程工作

这可能是一种情况只是使用更多语义类名，但我被难住了！

注意：可能已经有人回答过这个问题，但搜索起来很困难，如果重复的话，我们深表歉意！

原文

What's the best way to create multiple backgrounds with HTML5 and CSS and keep your markup semantic? I realise CSS3 supports multiple backgrounds but I want to use gradients also and am interested in how this is being completed practically - not just the theory of it.

The traditional approach might be to do something like:

<div class="background-outer">
  <div  class="background-inner">
    <article class="exiting-news">
      <p>We'll talk about something exciting here</p>         
    </article>
  <div>
</div>

I'd like a way to do this in a way that is cross browser friendly and that doesn't involve any programmatic work in Javascript or ASP.net/PHP etc

It may be a case of just using more semantic class names, but I'm stumped!

Note: Someone may have answered this already but it's a difficult thing to search on, apologies if this is a repeat!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

十六岁半 2024-12-09 12:45:35

这取决于它是个人项目还是客户项目。嵌套 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>

It depends on whether it's a personal project or for a client. Nested divs never hurt anyone, they're quick, and reliable in all browsers. Use with no shame if it's for someone else.

Otherwise, you're going to have to drop support for some browsers. Using multiple backgrounds in CSS is one way of doing that. The second I use sometimes is, depending on how many backgrounds you have, to position:relative the main block, and position:absolute the :before and :after elements to fill it and set backgrounds on them too. Works on basically all browsers very nicely.

Edit:

A validating code sample for the pseudo-element trick I use:

<!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>

回复收藏 0 原文

~没有更多了~