代码之家 › 专栏 › 技术社区 › Kerry Jones

将背景图像置于文本之上?

css

Kerry Jones · 技术社区 · 15 年前

这显然不是关于如何将文本置于背景图像之上的常见问题。

我有一个背景图像,我想作为一个覆盖--它应该在文本之上。为了简单起见,将另一个DIV放在现有的DIV上,并使背景图像更加困难。

背景图像是否可能位于文本上方?

5 回复 | 直到 15 年前

jackocnr 15 年前

这绝对是不可能的,完全是这样。如果你能使用背景元素的属性。背景 .

正确的方法是在容器内使用绝对定位的DIV(宽度和高度设置为100%),并在文本旁边: http://jsfiddle.net/EvqNb/

Hamid Nazari diptia 15 年前

好吧,我想如果可能的话。对于复杂的设计,应采用复杂的方法。不可能只让MSN的第一页出现在一个页面中 div . 无论如何,作为一个解决方案,你可以设置 color 该分区的属性 transparent ,它使文本不可见,但它在背景前面。

Yijinsei 15 年前

像这样的东西怎么样

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

Waynn Lue 14 年前

如果我清楚地理解这个问题,我想 {text-indent: -9999px;} 会有帮助的。

Paul de Vrieze 13 年前

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

推荐文章