перекрывающееся фоновое изображение - PullRequest
Новая
       1

перекрывающееся фоновое изображение

1 голос
/ 19 июня 2010

У меня есть таблица с фоновым изображением с использованием свойства css background-image. В таблице у меня есть несколько изображений, используя <img. Изображения <img находятся над фоновым изображением. Я хотел бы, чтобы фоновое изображение перезаписывало изображения <img как с текстом Это возможно?

Пример кода: 

<style>
#content { background-image:url("background-image.jpg"); background-repeat:repeat-y} 
</style>

<table id="content">
<tr>
  <td>Some text.....text.....text
    Image: <img src="quadrado.jpg" />
  </td>
</tr>
</table>

Ответы [ 2 ]

1 голос
/ 19 июня 2010 
"I would like to display the two images. The background image 
above the quadrado.jpg ! Like a watermark"

Звучит так, будто вы хотите наложение . Вы не можете сделать это только с помощью CSS.
Но вы можете подойти ближе, добавив такие стили: 

#content
{
    opacity:            0.8;
    -ms-filter:         "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter:             alpha(opacity=80);
}
#content img
{
    opacity:            0.8;
    -ms-filter:         "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter:             alpha(opacity=80);
}

.
Для более полного наложения вам нужно будет кодировать его в HTML или использовать JavaScript, чтобы добавить его на лету.

Взгляните на эту страницу . Он использует JavaScript для генерации оверлеев для блоков с классом OverlayTheBackground.

Есть также плагинов jQuery, которые должны генерировать оверлеи .

Возможно, опубликуйте картинку того, что вы хотите.

Но, это звучит , как все, что вам нужно сделать, это добавить этот стиль: 

#content img {visibility: hidden;}

0 голосов
/ 19 июня 2010

Я не уверен, что полностью понимаю вопрос, но если вы хотите, чтобы фоновое изображение показывалось через части изображений содержимого, вам нужно будет использовать png или gif, поскольку они позволяют прозрачным частям изображения и jpg don't.

...