Đây không phải là câu hỏi thường gặp về cách đặt văn bản lên hình nền.Đặt hình nền trên văn bản?
Tôi có hình nền mà tôi muốn làm lớp phủ - nó phải nằm trên văn bản. Để đơn giản hóa, hãy đặt một div khác trên div hiện có và cho rằng hình nền khó khăn hơn nhiều.
Có thể để hình nền ở trên văn bản không?
này chắc chắn là không thể, và đúng là như vậy. Sẽ sai (và khó hiểu) nếu bạn có thể sử dụng thuộc tính nền của một phần tử cho bất kỳ điều gì khác ngoài nền .
Cách đúng để làm điều này là với một div vị trí tuyệt đối (với chiều rộng và chiều cao thiết lập đến 100%) trong container, cùng với văn bản: http://jsfiddle.net/EvqNb/
Vâng, tôi không nghĩ nếu có thể. Đối với các thiết kế phức tạp, nên sử dụng các phương pháp phức tạp. Không thể tạo trang đầu tiên của MSN chỉ trong một div. Dù sao, như là một workaround bạn có thể thiết lập color tài sản của div đó để transparent, nó làm cho văn bản vô hình nhưng nó có ở phía trước của nền.
Làm thế nào về một cái gì đó giống như
<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>
Nếu tôi hiểu rõ câu hỏi, tôi nghĩ {text-indent: -9999px;} sẽ Cứu giúp.
Tôi đã giải quyết vấn đề này khá dễ dàng bằng cách làm cho văn bản trong suốt và đặt chế độ hiển thị thành inline-block. Lưu ý rằng bạn cần phải biết kích thước chính xác của hình ảnh của bạn nếu bạn muốn hiển thị chính xác hình ảnh của bạn:
<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>
Hi Deividas, Không cố gắng để che giấu văn bản. Hình nền có độ trong suốt nhưng không muốn văn bản được chọn, nếu tôi nhớ chính xác. –