Какой лучший способ создать несколько фонов с использованием HTML5 и CSS и сохранить разметку семантической? - PullRequest
Новая
       30

Какой лучший способ создать несколько фонов с использованием HTML5 и CSS и сохранить разметку семантической?

3 голосов
/ 02 сентября 2011

Какой лучший способ создать несколько фонов с помощью 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 Ответ

2 голосов
/ 02 сентября 2011

Зависит от того, будет ли это личный проект или для клиента. Вложенные div никогда никому не вредят, они быстрые и надежные во всех браузерах. Используйте без стыда, если это для кого-то еще.

В противном случае вам придется отказаться от поддержки некоторых браузеров. Использование нескольких фонов в CSS - один из способов сделать это. Второе, что я иногда использую, это, в зависимости от того, сколько фонов у вас есть, position:relative основного блока и position:absolute элементов :before и :after для его заполнения и установки фонов на них тоже. Работает практически во всех браузерах.

Edit:

Пример проверяющего кода для трюка с псевдоэлементом, который я использую: 

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