2012-01-12 43 views
8

Tôi đã kiểm tra kỹ URL của mình và tên của các tệp, nhưng dường như tôi không thể hiển thị hình ảnh đó. Tại sao nó lại như vậy? Đây là mã của tôi (lưu ý các <p> là bên trong các thẻ cơ thể, tôi đã không thêm mã đầy đủ, tôi chỉ thêm đầu và vấn đề cụ thể).HTML và CSS Hình nền không hiển thị

<html> 
    <head> 
    <title>Head First Lounge.</title> 
     <link type="text/css" 
      rel="stylesheet" 
      href="stylesheet/style.css" 
      media="screen"/> 
    </head> 


<p class = "guarantee"> 
    Our guarantee: at the lounge, we're committed to providing you, 
    our guest, with an exceptional experience every time you visit. 
    Whether you're just stopping by to check in on email over an 
    elixir, or are here for an out-of-the-ordinary dinner, you'll 
    find our knowledgeable service staff pay attention to every detail. 
    If you're not fully satisfied, have a Blueberry Bliss Elixir on us. 
</p>   

Và đây là quy tắc CSS cho rằng phần

.guarantee{   
     background-image: url(images/background.gif); 
     font-family: "Geogia", "Times New Roman", Times, serif; 
     border-color: black; 
     border-width: 1px; 
     border-style: solid; 
     background-color: #a7cece; 
      padding: 25px; 
      margin: 30px; 
      line-height: 1.9em; 
      font-style: italic; 
      color: #444; 
} 
+0

url của hình ảnh là gì? /images/background.gif hoặc /stylesheet/images/background.gif – KingCronus

+0

nó nằm ở hình ảnh/background.gif. đó là trang HTML chính. – user962206

+1

thay đổi 'background-image: url (../ images/background.gif) ' –

Trả lời

31

Cố gắng này:

background-image: url(../images/background.gif); 

Nếu không có sự ../ nó đang tìm kiếm một hình ảnh thư mục bên trong thư mục stylesheet của bạn mà không tồn tại . Vì vậy, bạn phải quay trở lại một thư mục chứa thư mục hình ảnh.

Sửa: Bạn cũng có thể rút ngắn lên phong cách CSS của bạn như sau:

.guarantee{ 
    background: #a7cece url(../images/background.gif); 
    border: 1px solid black; 
} 
+4

Nói cách khác: Nội dung bên ngoài trong các tờ định kiểu được liên kết tương đối với đường dẫn của biểu định kiểu. Nếu bảng định kiểu nằm ở 'stylesheet/style.css', thì' images/bg.gif' sẽ giải quyết thành 'stylesheey/images/bg.gif'. –

+0

Geez, cuối cùng tôi cũng làm việc đó. Tôi chưa bao giờ thực sự nhận ra mình đang ở một con đường khác và thư mục hình ảnh không phải là con đường giống với gosh trang chính, cảm ơn vì đã thêm một số mẹo hữu ích! Tôi mới sử dụng CSS, lập trình web cụ thể. Cảm ơn Drew! – user962206

+0

Bài đăng rất hữu ích! – nckbrz

2

Trình duyệt sẽ được tìm kiếm các hình ảnh trong thư mục stylesheet của bạn vào lúc này.

Có thể là giá trị cố gắng thay đổi

background-image: url(images/background.gif); 

để

background-image: url(/images/background.gif); 

mà có thể là nguyên nhân của vấn đề.

-1

Có thể bạn đã sử dụng dấu gạch chéo ngược (\) thay vì dấu gạch chéo về phía trước (/) trong đường dẫn hình ảnh.

Tôi đã phạm sai lầm này và đang chiến đấu với trình duyệt chrome của mình. Tôi sao chép đường dẫn hình ảnh từ Windows Explorer (trong đó sử dụng dấu gạch chéo ngược)

0

Tôi đã có vấn đề này cùng giải quyết nó bằng cách thêm/đến đầu url hình ảnh

(ví dụ: background-image: url (/ images/background.gif);)

Hope this helps :)

0

tôi biết câu trả lời này là hơi muộn nhưng liên kết này sẽ cung cấp cho bạn một lời giải thích chi tiết các đường dẫn tập tin css.

/ returns to the root directory 
../ moves one directory backwards 
../../ moves two directory backwards 

https://css-tricks.com/quick-reminder-about-file-paths/

Các vấn đề liên quan