Question

这不是关于如何将文字放在背景图像上的明显常见问题。

我有一个背景图片，我想用作叠加层 - 它应该在文本上面。为简单起见，在现有div上放置另一个div并给出背景图像要困难得多。

背景图片是否可能位于文本上方？

Answer 1

这绝对不可能，这是理所当然的。如果您可以将元素的背景属性用于背景以外的任何其他内容，那将是错误的（并且令人困惑）。

正确的方法是在容器内放置绝对定位的div（宽度和高度设置为100％）以及文本：http://jsfiddle.net/EvqNb/

Answer 2

好吧，我不认为是否可能。对于复杂的设计，应该使用复杂的方法。只能在一个div中创建MSN的第一页。无论如何，作为一种解决方法，您可以将该div的color属性设置为transparent，它会使文本不可见，但它位于背景前面。

Answer 3

像

这样的东西

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

Answer 4

如果我清楚地理解这个问题，我认为{text-indent: -9999px;}会有所帮助。

Answer 5

我通过使文本透明并将显示模式设置为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>

将背景图像放在文本上？

5 个答案: