CSS 将背景图像放在文本上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3314687/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Put background image over text?
提问by Kerry Jones
This is not the apparently-common question about how to put text over a background image.
这不是关于如何在背景图像上放置文本的常见问题。
I have a background image that I want to work as an overlay -- it should be over the text. For simplicity sake, placing another div over the existing div and giving that the background image is much more difficult.
我有一个背景图像，我想用作叠加层——它应该在文本之上。为简单起见，在现有 div 上放置另一个 div 并提供背景图像要困难得多。
Is it possible for a background image to be above the text?
背景图像是否可能位于文本上方？
采纳答案by Hymanocnr
This is definitely not possible, and rightfully so. It would be wrong (and confusing) if you could use the backgroundproperty of an element for anything other than the background.
这绝对是不可能的，这是理所当然的。如果您可以将元素的background属性用于background以外的任何内容，那将是错误的（并且令人困惑）。
The right way to do this is with an absolutely positioned div (with width and height set to 100%) within the container, alongside the text: http://jsfiddle.net/EvqNb/
正确的方法是在容器内使用绝对定位的 div（宽度和高度设置为 100%），旁边是文本：http: //jsfiddle.net/EvqNb/
回答by Hamid Nazari
Well, I don't think if it's possible. For complicated designs, complicated approaches should be used. It's not possible to make MSN's first page in just one div. Anyways, as a workaround you can set colorproperty of that div to transparent, it makes the text invisible but it's there in front of the background.
好吧，我认为这不可能。对于复杂的设计，应该使用复杂的方法。不可能将 MSN 的第一页放在一个div. 无论如何，作为一种解决方法，您可以color将该 div 的属性设置为transparent，它会使文本不可见，但它位于背景前面。
回答by Yijinsei
How about something like
怎么样的东西
<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>
回答by Deividas
If I clearly understood the question, I think {text-indent: -9999px;}would help.
如果我清楚地理解了这个问题，我认为{text-indent: -9999px;}会有所帮助。
回答by Paul de Vrieze
I solved this problem fairly easily by making the text transparent and setting the display mode to inline-block. Note that you need to know the exact size of your image if you want to display exactly your image:
我通过使文本透明并将显示模式设置为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>
