Поместить фоновое изображение поверх текста? - PullRequest
Новая
       1

Поместить фоновое изображение поверх текста?

7 голосов
/ 23 июля 2010

Это не совсем обычный вопрос о том, как поместить текст поверх фонового изображения.

У меня есть фоновое изображение, которое я хочу использовать в качестве наложения - оно должно быть поверх текста. Для простоты, поместив еще один div поверх существующего div и сделав фоновое изображение намного сложнее.

Возможно ли, чтобы фоновое изображение находилось над текстом?

Ответы [ 5 ]

6 голосов
/ 23 июля 2010

Это определенно невозможно, и это справедливо.Было бы неправильно (и сбивало с толку), если бы вы могли использовать свойство background элемента для чего-либо, кроме background .

. Правильный способ сделать этос абсолютно позиционированным div (с шириной и высотой, установленной на 100%) внутри контейнера, рядом с текстом: http://jsfiddle.net/EvqNb/

2 голосов
/ 23 июля 2010

Ну, я не думаю, если это возможно. Для сложных конструкций следует использовать сложные подходы. Невозможно сделать первую страницу MSN всего за одну div. В любом случае, в качестве обходного пути вы можете установить свойство color этого div на transparent, оно делает текст невидимым, но оно находится перед фоном.

0 голосов
/ 23 августа 2012

Я довольно легко решил эту проблему, сделав текст прозрачным и установив режим отображения на inline-block.Обратите внимание, что вам нужно знать точный размер вашего изображения, если вы хотите отобразить именно ваше изображение: 

<html>
<head>
  <style>
    #mydiv {
      width: 50px; /* The width of your image in pixels. */
      height: 50px; /* The height of your image in pixels. */
      display: inline-block; /* The inside needs to be a block to set it's size.
                                If positioned, it could be block as well. */
      color: transparent; /* Ensures we don't see the text. */
      background: url('logo.png'); /* The actual image we want to use. */
      overflow: hidden; /* Ensures that any text will not spill out of our box. */
    }
  </style>
</head>
<body>
  <div id="mydiv">Example.com</div>
</body>
</html>
0 голосов
/ 12 марта 2012

Если бы я ясно понял вопрос, думаю, {text-indent: -9999px;} помогло бы.

0 голосов
/ 23 июля 2010

Как насчет чего-то вроде 

<div class="container" style="position:relative;width:100px;height:100px;"> 
<p>Test to hide</p>
<div class="overlay" style="position:absolute;z-index:999;background:url(yourimage.jpg); width:100px;height:100px;"></div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...