Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

CSS Sprite không tải sprite chính xác

In lại Tác giả: Vũ trụ không gian Thời gian cập nhật: 2023-11-04 15:01:42 29 4
mua khóa gpt4 Nike

Tôi đang cố tải một bảng sprite cho một menu mà tôi đang xây dựng, nhưng thay vì hiển thị từng hình ảnh một, nó lại hiển thị toàn bộ bảng sprite ở các vị trí khác nhau trên phần tử.

Đây là mã CSS của tôi sử dụng hai hình ảnh:

#mymenu ul.menu > li > a.haschild
{
    nền: #000 url("../images/right.png") không lặp lại ở giữa bên phải;
}
    #mymenu ul.menu > li:hover > a.haschild
    {
        nền: #000 url("../images/right-hover.png") ở giữa bên phải không lặp lại;
    }

Đây là kết quả của nỗ lực sử dụng spritesheet của tôi:

#mymenu ul.menu > li > a.haschild
{
    nền: #000 url("../images/spritesheet.png") 0px 0px không lặp lại ở giữa bên phải;
}
    #mymenu ul.menu > li:hover > a.haschild
    {
        nền: #000 url("../images/spritesheet.png") -6px 0px không lặp lại ở giữa bên phải;
    }

Nhưng nó hiển thị hai hình ảnh (toàn bộ spritesheet) cùng một lúc

我也试过:

#mymenu ul.menu > li > a.haschild
{
    background: #000;
    hình nền: url("../images/spritesheet.png") 0px 0px không lặp lại ở giữa bên phải;
}
    #mymenu ul.menu > li:hover > a.haschild
    {
        background: #000;
            hình nền: url("../images/spritesheet.png") -6px 0px không lặp lại ở giữa bên phải;
    }

Kết quả tương tự...

我做错了什么？

biên tập

Đây là jsFiddle của tôi:

http://jsfiddle.net/HKaSw/

câu trả lời hay nhất

Bạn phải nghĩ về nó theo cách này: bạn đang áp dụng hình nền cho một phần tử rất lớn. CSS của bạn không biết rằng hình nền là một sprite; nó chỉ hiển thị hình nền giống như bất kỳ hình nền nào khác. Trong trường hợp của bạn, biểu tượng nằm trên hình ảnhbên cạnh nhau, vì vậy chúng xuất hiện như một tổng thể. Bạn không thể chỉ cắt một phần hình nền bằng css, do đó bạn cần phải bao gồm đủ phần đệm trong sprite để tính kích thước của phần tử (khó khăn vì bạn có thể muốn sử dụng biểu tượng trên phần tử lớn hơn, tức là một ẩn số) hoặc Bao gồm các biểu tượng thích hợp trong đánh dấu của bạn精确kích thước của các phần tử bổ sung và sau đó thêm các họa tiết biểu tượng vào chúng (dễ dàng hơn, nhưng việc đánh dấu thêm sẽ rất tệ).

Đây là một ví dụ về mã trong đó tôi đã loại bỏ một số CSS không liên quan (tôi chắc chắn rằng nó có thể được tối ưu hóa hơn nữa, nhưng chúng tôi chỉ xử lý các biểu tượng ở đây). Bạn không cần xác định lớp biểu tượng trên cả mục menu cha và mục menu con; bạn có thể sử dụng lại lớp biểu tượng. Đây chính là mục đích của CSS!

a.haschild tôi {
  nền: #000 url("http://www.grouctivity.com/menu/sprites.png") không lặp lại 0 0;
}

a.haschild:di chuột vào {
  vị trí nền: -6px 0;
}

Đây là jsFiddle với bản demo của các thành phần biểu tượng bổ sung:http://jsfiddle.net/HKaSw/2/

Về việc CSS Sprite không tải Sprite chính xác, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/16347856/

29 4 0
Bài viết khuyến nghị: css - Cách thêm đường viền vào văn bản trong trường nhập
Bài viết khuyến nghị: Làm cách nào để đảm bảo rằng loại hàm được truyền dưới dạng tham số mẫu không sửa đổi các tham số?
Bài viết khuyến nghị: Câu lệnh ghép với toán tử quá tải không hoạt động (C++)
Bài viết khuyến nghị: java - Lấy số trang của tài liệu word bằng cách sử dụng aspose
không gian vũ trụ
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress