Câu đố CSS: Cách thêm hình nền và đặt chiều cao/chiều rộng trên khoảng trống?

Question

Tôi đã đặt background-image trên một vài yếu tố span, nhưng chúng không hiển thị, tôi nghĩ vì cài đặt height và width của bạn đang bị bỏ qua.

nguồn HTML:

<div class="textwidget"> 
<a href="#" title="Start here"><span id="starthere" class="sidebar-poster"></span></a> 
<a href="#" title="Primary documents"><span id="#primarydocs" class="sidebar-poster"></span></a> 
<a href="#" title="Donate"><span id="donate" class="sidebar-poster"></span></a> 
</div> 

CSS:

span.sidebar-poster { 
    margin-bottom: 10px; 
    background-repeat: no-repeat; 
    width: 160px; 
} 
span#starthere { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg); 
    height: 285px; 
} 
span#starthere:hover { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg); 
} 
span#primarydocs { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg); 
    height: 285px; 
} 
span#primarydocs:hover { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg); 
} 
span#donate { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donatebutton.jpg); 
    height: 285px; 
} 
span#donate:hover { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donateposter_hover.jpg); 
} 

Không ai trong số những hình ảnh nền thực sự nhìn thấy được.

Trong Công cụ dành cho nhà phát triển Chrome, Theo Kiểu được tính toán, hai nhịp này dường như có hình nền. Nếu tôi sao chép và dán URL của hình ảnh này, tôi sẽ thấy hình ảnh. Tuy nhiên, không có gì thực sự dựng hình.

[CẬP NHẬT - phần này được giải quyết, nhờ] Trong Công cụ nhà phát triển Chrome, dưới Rules khớp, chỉ có #starthere và #donate nhịp đang thực sự chọn lên các thuộc tính background-image. Khoảng thời gian #primarydocs là không. Tại sao không?

Answer 1

SPAN là phần tử nội tuyến. Mà thực sự sẽ bỏ qua những điều như vậy. Thử đặt chế độ hiển thị trong CSS của bạn thành một cái gì đó như: display: block;

Answer 2

Tôi nghĩ rằng span s cần phải có display:inline-block, khoảng thông thường sẽ luôn có chiều rộng và chiều cao 'tự nhiên' của nó.

Answer 3

Giải quyết sự cố - bạn không thể đặt height và width trên span vì đó là phần tử nội tuyến. Chuyển sang div đã giải quyết.

Phew.

Nếu có ai biết cách gỡ lỗi CSS bằng các công cụ tốt hơn so với phỏng đoán, hy vọng, tìm kiếm trên Google và chửi thề, vui lòng cho tôi biết!

Answer 4

Tự động không thể mấtvà height thuộc tính từ CSS.

Nếu bạn muốn sử dụng đặc tính inline nhưng không có nội dung bên trong (ví dụ: <span> nội dung </span>) và thay vào đó có hình nền, hãy sử dụng padding thay thế.

ví dụ:

span { padding: 10px; }

nhưng đầu vào số lượng pixel bạn sẽ cần phải thể hiện hình ảnh.