CSS - непрозрачность заголовка по отношению к изображению - PullRequest
Новая
       11

CSS - непрозрачность заголовка по отношению к изображению

0 голосов
/ 17 марта 2010

Скажем, у меня есть следующее в моем CSS: 

h1 {
  font-family: Verdana;
  font-size: 20pt;
  color: Black;
  z-index: 2;
  opacity: 1.0;
}

#topFrame {
  position: fixed;
  top: 0;
  left: 20%;
  right: 20%;
  height: 120px;
  overflow: hidden;
  border: 1px solid black;
  background-image: url(dunno.jpg);
  text-align: center;
  vertical-align: center;
  opacity: 0.5;
  z-index: 1;
}

Когда я помещаю div с идентификатором "topFrame" в HTML, а затем пытаюсь написать заголовок, используя теги h1, заголовок такой же непрозрачный, как и изображение (поэтому вместо того, чтобы быть "выделяющимся" черным, он показывает как серовато-серый.

Можно ли как-нибудь сделать так, чтобы h1 выделялся с точки зрения непрозрачности, при этом сохраняя изображение полупрозрачным, не создавая невидимый div для размещения заголовка (если это имеет смысл)?

Ответы [ 2 ]

0 голосов
/ 17 марта 2010

Непрозрачность CSS наследуется для детей. Вы можете использовать прозрачный PNG для фона topFrame, вы можете имитировать отношения родитель-ребенок, как показано в этой статье: http://www.stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children, иначе вам не повезет, я думаю.

0 голосов
/ 17 марта 2010

Реального решения для этого не существует.

Если родительский элемент имеет непрозрачность 0,5, дочерний элемент будет иметь такую ​​же непрозрачность.

Один из способов предотвратить это - поместить тег h1 поверх вашего #topFrame, и вам нужно будет убедиться, что h1 не является потомком # topFrame 

h1{ font-family: Verdana; font-size: 20pt; color: Black; z-index: 2; opacity: 1.0; position: fixed; left: 20%; right: 20% }

Что-то похожее на это.

...