Ảnh nền CSS - Cách sử dụng đúng là gì?

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

1. Có cần phải được trích dẫn 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) hay nó phải là một URL đầy đủ?
3. Bất kỳ điểm nào khác 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.

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

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

background-image: url(image.jpg);

Hoặc là

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

Tuy nhiên, từ W3 :

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

Vì vậy, trong những trường hợp như thế này, cần phải sử dụng dấu ngoặc kép hoặc dấu ngoặc kép hoặc thoát các ký tự.

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

2. Có bạn 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 đừng sử dụng dấu ngoặc kép. Tôi nghĩ rằng có những khách hàng không hiểu họ.

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 thư mục hình ảnh trong thư mục mà css được tải. Vì vậy, nếu hình ảnh nằm trong thư mục khác hoặc ngoài cây thư mục CSS, bạn nên sử dụng đường dẫn tuyệt đối hoặc liên quan đến đườ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 ảnh nền để làm cho nó hoạt động nhất quán trên các trình duyệt tuân thủ tiêu chuẩn như:

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

Đường dẫn tương đối là tốt và trích dẫn không cần thiết. Một điều khác có thể giúp là sử dụng thuộc tính "tốc ký" 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 số lý do.

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

Cũng lưu ý rằng bạn có thể chỉ định liệu hình ảnh sẽ lặp lại hay không và theo hướng nào (nếu bạn không chỉ định, mặc định là lặp lại theo chiều ngang và chiều dọc) và cả vị trí của hình ảnh so với vùng chứa của nó.

Nếu hình ảnh của bạn nằm trong một thư mục riêng của tệp 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');

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

bạn thực sự không cần dấu ngoặc kép nếu giả sử sử dụng hình ảnh từ tệp css của bạn.

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

Bạn không cần phải sử dụng dấu ngoặc kép và bạn có thể sử dụng bất kỳ con đường nào bạn muốn!

Hãy xem các trang tham chiếu trang web tương ứng cho hình nền và URI

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 ngoặc đơn).
2. Cả tương đối và tuyệt đối là có thể; một đường dẫn tương đối liên quan đến đường dẫn của tệp css.

chỉ cần viết vào tập tin css của bạn như dưới đây

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