Có thể sử dụng CSS sprites cho hình ảnh "tiền cảnh" - tức là hình ảnh mà người dùng phải bấm vào và tương tác với và thậm chí có thể in không?CSS Sprites - không chỉ cho hình nền?
Thay vì sử dụng thuộc tính CSS background-image. Bạn sẽ sử dụng cái gì?
Bạn có thể sử dụng thẻ tiêu chuẩn <img /> và đặt nó vào một vùng chứa (như <div />) với chiều cao/chiều rộng giới hạn. Sau đó sử dụng vị trí tương đối hoặc lề âm để kiểm soát vị trí của hình ảnh.
Bạn có thể thực hiện việc này, nhưng bạn phải sử dụng hình nền cho họa tiết khi bạn có thể đặt vị trí. Điều này có thể được sử dụng cho các liên kết hoặc bất cứ điều gì bạn muốn. Nhìn vào Googles ma, họ sử dụng nó cho có nút trên iGoogle: http://img0.gmodules.com/ig/images/v2/sprite0_classic.gif
-1 Bạn có thể kiểm soát vị trí của bất kỳ phần tử nào bằng cách sử dụng 'vị trí' trong CSS kết hợp với' trên cùng, bên trái, bên phải, dưới cùng'. Ngoài ra, bạn có thể sử dụng lề âm. –
Tôi chưa bao giờ nói bạn có thể kiểm soát vị trí trong bất kỳ phần tử nào. Tuy nhiên, bạn có thể làm cho nó hoạt động với hình nền trên bất kỳ phần tử nào. –
Vâng tất nhiên bạn có thể, nhưng họ đặc biệt yêu cầu làm thế nào để làm điều đó * mà không có * hình ảnh nền! –
Bạn có thể làm điều này với ít CSS như thế này:
.myClass { background: url(../Images/Sprite.png) no-repeat;
height: 20px;
width: 40px;
background-position: -40px 0;
display: block; }
.myClass:hover { background-position: -40px -20px; }
Dù có lớp class="myClass" sẽ phải chỉ là hình ảnh trong đó, không có gì khác. Đây có thể là <a> một số <input> hoặc một số bình thường <div>, bất kể bạn muốn gì.
Đó là hình nền ... nhưng đó là phần tử bạn đang xem, không có gì ở phía trước nền đó. Chỉ vì bạn đang sử dụng background-image cho thuộc tính không có nghĩa đó không phải là phần tử tiền cảnh ... giống như nút bạn có thể nhấp vào. Bạn có thể làm điều đó như sau:
<input type="button" class="myClass" />
Đó là giải pháp dựa trên hình nền, bất kể bạn xoay vòng như thế nào. Câu hỏi một cách rõ ràng yêu cầu cái gì khác. Và tôi hiểu lý do tại sao - rõ ràng là * cơ bản * khác biệt giữa các hình ảnh là một phần của nội dung tài liệu và những hình ảnh là một phần của bố cục và phong cách của nó. – amn
Một yêu cầu chính không thể xử lý bằng hình nền là ARIA. Tất cả các yêu cầu ARIA sẽ từ chối việc sử dụng hình nền cho các sử dụng có ý nghĩa, điều hướng và các thông tin 'thông tin' khác mà trình đọc màn hình phải thông dịch thay mặt cho người dùng bị khuyết tật. Có thể hoán đổi một câu lệnh css hình nền cho một thẻ img và một số gắn thẻ ARIA bất cứ khi nào cần thiết là một tính năng quan trọng trong môi trường phát triển được điều chỉnh hiện tại.
Câu trả lời cho câu hỏi ban đầu là có! Có thể sử dụng hình ảnh được hiển thị trong câu lệnh nền css. Nhưng bạn phải mở hình ảnh ma trong trình chỉnh sửa hình ảnh và chọn phần đại diện cho sprite bạn muốn và lưu nó dưới dạng hình ảnh riêng biệt và tham chiếu nó trong thẻ img.
Thách thức thường xảy ra, những tình huống này phát sinh trong thư viện kiểm soát được xây dựng sẵn. Tìm và thay đổi mã trong thư viện mà chọn và hiển thị hình nền là một chút khó khăn, việc thay đổi mã là khó!
Genius, cảm ơn bạn !! – Summer
Đây là IMO quá mức, bạn chỉ có thể đặt đầu vào thành khối hiển thị và loại bỏ div/wrapper ra khỏi phương trình tất cả cùng nhau, đó là một cách tiếp cận đơn giản hơn nhiều. –
@Nick Điều đó không có ý nghĩa gì cả. Làm thế nào bạn sẽ áp dụng một sprite mà không sử dụng container? –