Tại sao hộp thoại jquery-ui-sử dụng cả màu nền và hình ảnh cho lớp phủ?

Question

jquery-ui-dialog sử dụng div lớp phủ cho các hộp thoại phương thức. Div có kiểu này:

.ui-widget-overlay { 
    background: #AAA url(images/ui-bg_flat_75_aaaaaa_40x100.png) 50% 50% repeat-x 
    opacity: 0.3; 
} 

Tại sao nó chỉ định cả màu nền và hình ảnh? Tại sao không chỉ là màu?

Answer 1

Tôi nghĩ rằng đó là an toàn hơn để luôn áp dụng màu cùng với hình nền.

Trình duyệt không thể hỗ trợ định dạng png hoặc yêu cầu cho hình ảnh có thể không thành công (vì bất kỳ lý do gì).

Mặt khác, màu sẽ luôn được áp dụng. Xem nó như là một loại kế hoạch dự phòng :-)

---

Edit:

Bạn thực sự không đòi hỏi một tập tin hình ảnh để chỉ cần tạo một lớp phủ màu bán trong suốt. Chỉ cần background-color và opacity là đủ.

Tôi cho rằng lý do chính xác là jquery ui cho phép áp dụng họa tiết (bạn có thể chọn hoặc tắt chúng trong ứng dụng ThemeBuilder trên trang web jquery ui. Đây là lý do tại sao hình ảnh được sử dụng, ngay cả khi không có kết cấu nào được chọn . không kết cấu thực sự là "phẳng" texture Bạn thực sự có thể nhìn thấy nó trong tên của tập tin hình ảnh:.

ui-bg_flat_75_aaaaaa_40x100.png 

• phẳng = không có kết cấu, màu sắc phẳng
• = opacity của kết cấu (sử dụng kênh alpha png)
• aaaaaa = màu sắc của kết cấu
• 40x100 = kích thước của mô hình

Nếu bạn áp dụng các "white-dòng" kết cấu để lớp phủ trong ThemeBuilder, nó sẽ tạo ra tập tin hình ảnh với tên này:

ui-bg_ trắng dòng _75_aaaaaa_40x100

Phần đầu tiên của câu trả lời vẫn hợp lệ nhưng đây là lý do chính trong trường hợp jquery ui.

Answer 2

Chỉ cần một đoán, nhưng có lẽ đó là vì các trình duyệt cũ thiếu hỗ trợ PNG hoặc chỉ hỗ trợ 'một phần' cho hiệu lực thi hành mà họ muốn đạt được, hoặc cho những người quên để sao chép các hình ảnh trên

Answer 3

Những gì bạn có là thuộc tính viết tắt CSS để đặt nền. Bạn cũng có thể viết:

background-color: #AAA; 
background-image: url(images/ui-bg_flat_75_aaaaaa_40x100.png); 
background-position: 50% 50%; 
background-repeat: repeat-x; 

Vì màu là thông số đầu tiên trong phiên bản viết tắt, nó phải được chỉ định. Nó có hiệu lực nếu ví dụ:

• các background-image không được tìm thấy
• hoặc (trong trường hợp này) chiều cao của phần tử mở rộng chiều cao của background-image
• hoặc background-image của bạn có chứa transparacy.

Nếu bạn chỉ muốn chỉ định một màu sắc, bạn có thể làm điều này:

background-color: #AAA; 

hay đó (phiên bản tốc ký chỉ với một tham số):

background: #AAA; 

các thông số khác sẽ được đặt thành mặc định sau đó. Nếu bạn muốn expresseion tương tự nhưng không có hình ảnh, bạn có thể làm điều đó như vậy:

background: #AAA none 50% 50% repeat-x; 

Here's một lời giải thích khá tốt về chủ đề này.

Answer 4

Tôi nghĩ bạn có thể sử dụng chọn hình nền png bán trong suốt cho các tiện ích của bạn khi bạn tạo các tải xuống jquery ui tùy chỉnh. Do đó, điều quan trọng là các phần trong suốt có màu bên dưới.

Chỉnh sửa: Có nghĩa là người xây dựng chủ đề được xây dựng để luôn bao gồm màu và png và gắn với các sơ đồ này, nó bao gồm một png màu chắc chắn nếu kết cấu của bạn chắc chắn, trái ngược với rô hoặc sọc hoặc tùy chọn gradient.

Thấy sự khác biệt giữa:

with semi transparent png

with solid png