Bắt hình nền hiển thị trong phần tử div trống

Question

Tôi đang tìm cách sử dụng phần tử div trống để hiển thị hình nền nhưng không có gì hiển thị trừ khi tôi đặt thứ gì đó (ví dụ: một số văn bản) trong phần tử div.

Tôi cần làm điều này vì tôi muốn hiển thị hình ảnh bên cạnh một số văn bản nhưng có đồ họa được căn chỉnh theo chiều dọc với văn bản.

Làm thế nào để bạn có được hình nền để hiển thị trong div trống?

Google-fu của tôi đã không thành công với tôi.

<div class="photoInfo"> 
lorem ipsum | 
<div style="background:url('foo.gif') no-repeat;display:inline;"></div> 
</div> 

Cảm ơn!

chỉnh sửa: Mã bên dưới thực sự hiển thị hình ảnh nhưng tôi chỉ cần đặt biệt hiệu xuống dưới 2 hoặc 3 pixel để căn chỉnh hoàn toàn.

Đó là những gì tôi đang cố gắng đạt được, bất kỳ ý tưởng nào?

<div class="photoInfo"> 
    Added<span class="spacer">•</span>Wed Apr 01, 2009 1:01 pm<span class="spacer">•</span>64.10 KB<span class="spacer">•</span>659x878 pixels 
    <span class="spacer">•</span> 
    <img src="/_assets/img/icons/new-photo-small.gif" /> 
</div> 
<!--<div style="height:14px;width:31px;background:url('') no-repeat 0px 5px;display:inline-block;"></div>--> 

.photoInfo 
{ 
font-size:0.6em; 
color:#b0bad9; 
padding-bottom:15px; 
text-align:center; 
} 

Answer 1

Tặng thử ảnh này!

one | <span style="padding-left: 20px; background: url('16x16-image.gif') no-repeat; height: 16px">two</span> | three 

Nếu bạn sử dụng một div thay vì span, bạn sẽ cần phải thiết lập display: inline theo phong cách là tốt.

Answer 2

Nền nên trên photoInfo div, và bạn có thể vị trí của nó với background-position. Bạn không thể có một nền tảng trên một cái gì đó là 0 chiều cao và chiều rộng. Nếu bạn tăng nó mặc dù nó sẽ chiếm không gian trên thiết kế của bạn.

Answer 3

overflow:hidden có thể trợ giúp hoặc chỉ định chiều dài và chiều rộng cho div.

Nói chung, tôi nghĩ rằng có những cách khác để đạt được những gì bạn muốn. Nếu bạn chỉ muốn có một văn bản và một hình ảnh theo chiều ngang liên kết, bạn có thể làm điều đó mà không cần đưa hình ảnh vào một div. Ví dụ: bạn có thể sử dụng inline và float.

Answer 4

Bạn phải đặt kích thước div, nếu không kích thước của nó là 0px x 0px.

Answer 5

Cheap work-aroound. đặt một khoảng trắng không ngắt (& nbsp;) trong div.

Answer 6

Nếu bạn không muốn bất kỳ văn bản, công trình này trong Safari và Firefox (không kiểm tra IE):

one | <span style="padding: 16px 16px 0 0; background: url('16x16-image.gif') no-repeat; font-size: 0">&nbsp;</span> | three

Answer 7

bạn đang cố gắng để di chuyển hình nền, không nhúc nhích div?

Hãy thử background-position: xpos ypos;

Để di chuyển nó xuống 3 pixels: background-position: 0px 3px;