Как получить элементы с разными цветами фона, но фоновое изображение отображается везде (или водяным знаком)? - PullRequest
Новая
       9

Как получить элементы с разными цветами фона, но фоновое изображение отображается везде (или водяным знаком)?

1 голос
/ 27 февраля 2009

Я хочу создать html-страницу с водяным знаком. Я установил фоновое изображение на теле. Однако у меня есть некоторые элементы, которые не позволяют фоновому изображению проливаться. Они определяют свой собственный фоновый цвет (но не background-image), переопределяя цвет в теле. Это удивило меня. Они не перекрывают изображение, только цвет.

Кажется разумным иметь видимый водяной знак на странице с элементами, имеющими разные цвета фона.

Как получить желаемый эффект при использовании стандартного html / css?

Вот пример кода, который показывает проблему. Обратите внимание на белый блок, скрывающий мое изображение водяного знака. 

<html>
<head>
<style type="text/css">

.everything
{ 
    background: url(/images/shield-25.png) blue no-repeat center;
}
table, div{ width: 100% }

#table2 { background-color: white }
#div2 { background-color: white }
</style>
</head>
<body class="everything">

  <table id="table1"><tr><td>Top</td></tr></table>
  <!-- This table put a big white line over my watermark image. -->
  <table id="table2"><tr><td>Middle</td></tr></table>
  <table id="table3"><tr><td>Bottom</td></tr></table>

  <div id="div1"><tr><td>Top</td></tr></div>
  <!-- Thought maybe it was a table thing but nope, divs do it too. -->
  <div id="div2"><tr><td>Middle</td></tr></div>
  <div id="div3"><tr><td>Bottom</td></tr></div>

</body>
</html>

Ответы [ 4 ]

3 голосов
/ 27 февраля 2009

К сожалению для вас, это предполагаемое поведение. background-image и background-color являются подчиненными свойствами свойства background. Так как вы определили фон для #table2 и #div2, вы больше не можете видеть их сквозь фон страницы.

CSS3 позволяет вам установить прозрачность фона, используя выражение rgba(), но IE не поддерживает это ( Firefox 3 и Safari / Webkit делают ). Чтобы получить эффект, подобный rgba () в IE, вы можете использовать правило filter:, например: 

#table2 {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff80,endColorstr=#ffffff80); /* IE proprietary */
    background-color: rgba(255, 255, 255, 0.5); /* CSS3 standard */
}

Обратите внимание, что параметры startColorstr и endColorstr имеют четвертое значение для альфа.

1 голос
/ 27 февраля 2009

Вы можете посмотреть настройку непрозрачности CSS здесь: http://www.quirksmode.org/css/opacity.html

Однако я считаю (не проверено), что это будет применяться к любому тексту внутри элементов, поэтому вам, вероятно, понадобится второй класс, чтобы установить непрозрачность обратно в 1 для текста внутри таблицы и т. Д.

1 голос
/ 27 февраля 2009

Невозможно выполнить то, что вы хотите, без каких-либо хитрых взломов HTML / CSS. Если вы установите цвет фона элемента, он не позволит изображениям под ним «просвечивать».

0 голосов
/ 27 февраля 2009

Вы устанавливаете background-image для элемента body. Элементы div и таблица непрозрачны и находятся перед элементом body, поэтому они закрывают ваш водяной знак.

Если вы хотите применить водяной знак к каждому элементу индивидуально, вы должны сделать что-то вроде этого: 

#table1, #table2, #table3, #div1, #div2, #div3 { 
    background: url(/images/shield-25.png) blue no-repeat center;
}

или, может быть 

table, div { 
    background: url(/images/shield-25.png) blue no-repeat center;
}
...