将背景图像放在文本上？
[英]Put background image over text?
问题描述
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? 背景图像是否可能位于文本上方？
5 个解决方案
解决方案1
6 已采纳 2010-07-23 08:40:37
This is definitely not possible, and rightfully so. 这绝对不可能，这是理所当然的。 It would be wrong (and confusing) if you could use the background property of an element for anything other than the 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/
解决方案2
2 2010-07-23 01:47:34
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 . 只能在一个div制作MSN的第一页是不可能的。 Anyways, as a workaround you can set color property of that div to transparent , it makes the text invisible but it's there in front of the background. 无论如何，作为一种解决方法，您可以将该div的color属性设置为transparent ，它使文本不可见，但它位于背景前面。
解决方案3
0 2012-08-22 21:00:46
I solved this problem fairly easily by making the text transparent and setting the display mode to inline-block . 我通过使文本透明并将显示模式设置为inline-block来相当容易地解决了这个问题。 Note that you need to know the exact size of your image if you want to display exactly your image: 请注意，如果要准确显示图像，则需要知道图像的确切大小：
<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>
解决方案4
0 2010-07-23 01:52:08
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>
解决方案5
0 2012-03-11 22:22:46
如果我清楚地理解了这个问题，我认为{text-indent: -9999px;}会有所帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.