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
-
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:<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) -
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.
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/
讨论(0) -
If I clearly understood the question, I think
{text-indent: -9999px;}would help.讨论(0) -
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 setcolorproperty of that div totransparent, it makes the text invisible but it's there in front of the background.讨论(0) -
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>讨论(0)
加载中...
- 热议问题