Hình nền CSS - Cách sử dụng chính xác là gì?

Question

Việc sử dụng chính xác thuộc tính hình nền CSS là gì? Những điều quan trọng tôi đang cố gắng để hiểu là

1. Liệu nó cần phải được trong dấu ngoặc kép tức là .: background-image: url('images/slides/background.jpg');
2. Nó có thể là một đường dẫn tương đối (như trên) hoặc nó phải là một URL đầy đủ?
3. Bất kỳ điểm nào khác mà tôi cần lưu ý để đảm bảo nó hoạt động chính xác trên các trình duyệt tuân thủ tiêu chuẩn.

Answer 1

Đường dẫn có thể đầy đủ hoặc tương đối (tất nhiên nếu hình ảnh từ một tên miền khác phải đầy).

Bạn không cần sử dụng dấu ngoặc kép trong URI; cú pháp hoặc có thể là:

background-image: url(image.jpg); 

Hoặc

background-image: url("image.jpg"); 

Tuy nhiên, từ W3:

Một số nhân vật xuất hiện trong một URI không thể viện chứng, chẳng hạn như dấu ngoặc đơn, ký tự khoảng trắng, dấu nháy đơn (') và dấu ngoặc kép ("), phải được thoát bằng dấu gạch chéo ngược sao cho giá trị URI kết quả là mã thông báo URI:' \ (',' \) '.

Vì vậy, trong các trường hợp như vậy, hoặc là cần thiết để sử dụng dấu ngoặc kép hoặc dấu ngoặc kép hoặc thoát khỏi các ký tự.

Answer 2

Bạn không cần sử dụng dấu ngoặc kép và bạn có thể sử dụng bất kỳ đường dẫn nào bạn thích!

Answer 3

1. Không cần báo giá.

2. Có thể. Nhưng lưu ý rằng các URL tương đối được giải quyết từ URL của biểu định kiểu của bạn.

3. Tốt hơn không nên sử dụng dấu ngoặc kép. Tôi nghĩ có những khách hàng không hiểu họ.

Answer 4

1) đặt dấu ngoặc kép là một thói quen tốt

2) nó có thể là đường dẫn tương đối ví dụ:

background-image: url('images/slides/background.jpg'); 

sẽ tìm kiếm thư mục hình ảnh trong thư mục mà từ đó css được tải. Vì vậy, nếu hình ảnh nằm trong một thư mục khác hoặc trên cây thư mục CSS, bạn nên sử dụng đường dẫn tuyệt đối hoặc tương đối với đường dẫn gốc (bắt đầu bằng /)

3) bạn nên sử dụng khai báo hoàn chỉnh cho nền để làm cho nó hoạt động nhất quán trên các trình duyệt tuân thủ các tiêu chuẩn như:

background:blue url('/images/clouds.jpg') no-repeat scroll left center; 

Answer 5

Hãy nhìn vào các trang tài liệu tham khảo Sitepoint tương ứng cho background-image và URIs

1. Nó không phải là trong dấu ngoặc kép nhưng có thể sử dụng chúng nếu bạn muốn. (Tôi nghĩ IE5/Mac không hỗ trợ dấu nháy đơn).
2. Cả tương đối lẫn tuyệt đối đều có thể thực hiện được; một đường dẫn tương đối có liên quan đến đường dẫn của tệp css.

Answer 6

Đường dẫn tương đối tốt và không cần báo giá. Một điều khác có thể giúp là sử dụng thuộc tính "viết tắt" background để chỉ định màu nền trong trường hợp hình ảnh không tải hoặc không có sẵn vì một lý do nào đó.

#elementID { 
    background: #000 url(images/slides/background.jpg) repeat-x top left; 
} 

Cũng thông báo rằng bạn có thể xác định xem hình ảnh sẽ lặp lại và trong những gì hướng (nếu bạn không chỉ định, mặc định là để lặp lại ngang và dọc), và cũng là vị trí của hình ảnh tương ứng với nó thùng đựng hàng.

Answer 7

Nếu hình ảnh của bạn đang ở trong một thư mục riêng biệt của file css của bạn và bạn muốn đường dẫn tương đối bắt đầu từ thư mục gốc của trang web của bạn:

background-image: url('/Images/bgi.png'); 

Answer 8

chỉ cần kiểm tra cấu trúc thư mục nơi chính xác hình ảnh được giả sử bạn có một thư mục css và thư mục hình ảnh bên ngoài thư mục css sau đó bạn sẽ phải sử dụng "../ images/image.jpg" và nó sẽ làm việc như nó đã làm cho tôi chỉ cần chắc chắn rằng cấu trúc thư mục.

Answer 9

chỉ cần viết trong file css của bạn như dưới đây

background:url("images/logo.jpg") 

Answer 10

bạn thực sự không cần dấu ngoặc kép nếu để nói sử dụng đang sử dụng hình ảnh từ file css của bạn nó có thể được

{background-image: url(your image.png/jpg etc);}