Thay đổi vị trí nền CSS trên trục Y chỉ

Question

Ok ... vậy đây là vấn đề.

Tôi có một hình ảnh CSS sprite được tạo thành từ mười (10) 25px x 25px biểu tượng đặt ra theo chiều ngang - do đó dẫn đến một hình ảnh sprite có chiều rộng 250px.

Tôi đang sử dụng những hình ảnh 25x25 làm hình thu nhỏ. Tôi đang tìm kiếm để có một opacity 30% trên những hình ảnh này trong chế độ xem INITIAL và khi người dùng di chuột qua chúng thì độ mờ cần phải là 100% (1).

Vì vậy, những gì tôi đã làm là tạo một hàng hình ảnh SECOND với độ mờ của họ ở mức 30% - vì vậy bây giờ tôi có một hình ảnh sprite 250px x 50px. 25px hàng đầu ở 100% và 25px dưới cùng ở mức 30%.

tôi thiết lập HTML như sau:

<a href="largeimage1.jpg" class="thumb1"></a> 
<a href="largeimage2.jpg" class="thumb1"></a> 
<a href="largeimage2.jpg" class="thumb1"></a> 
etc... 

và CSS:

a { display: block; float: left; width: 25px; height: 25px; background: url("250_x_50_spriteimage.jpg") 0 -25px no-repeat; } 
.thumb1 { background-position: 0 0; } 
.thumb2 { background-position: -25px 0; } 
.thumb3 { background-position: -50px 0; } 
a:hover { **background-position-y**: -25px; } 

Tuy nhiên, điều này không xuất hiện để làm việc không may, như background-position-y là không được hỗ trợ trong Firefox (hoặc không phải là một tiêu chuẩn, nhưng là đặc trưng cho IE).

Ý tưởng là chúng tôi (chỉ) muốn SHIFT hình ảnh sprite UP (dọc theo trục y) và rời khỏi trục x như (hoặc được đặt trong các lớp trước).

Nếu không có giải pháp CSS đơn giản nào cho điều này - hiệu ứng opacity này có thể được thực hiện với JQUERY không? Vì vậy, các ngón tay cái sẽ tải ở độ mờ 30% và sẽ chuyển sang độ mờ 100% khi người dùng di chuyển?

Rất cám ơn,

M.

Answer 1

Bạn không cần bộ biểu tượng thứ hai hoặc sử dụng JavaScript để đạt được hiệu quả mong muốn.

Như Lou đã chỉ ra, sử dụng opacity để làm cho biểu tượng của bạn 30% hoặc hiển thị đầy đủ. Không cần phải gây rối với background-position nữa.

Chỉ cần đi trước và xác định phong cách của bạn cho phù hợp với những điều sau đây:

a { 
    opacity:0.3; /* for standard browsers */ 
    filter: alpha(opacity = 30); /* for IE */ 

    display: block; 
    float: left; 
    width: 25px; 
    height: 25px; 
    background: url("250_x_50_spriteimage.jpg") 0 -25px no-repeat; 
} 

a:hover { 
    opacity:1.0 
    filter: alpha(opacity = 100); 
} 

.thumb1 { background-position: 0 0; } 
.thumb2 { background-position: -25px 0; } 
.thumb3 { background-position: -50px 0; } 

Nếu bạn đang lo lắng về việc xác thực mã CSS của bạn, lấy phần IE-cụ thể (mà sẽ không xác nhận) và đặt chúng trong các tệp CSS được nhắm mục tiêu cụ thể qua conditional comments.

Hy vọng điều đó sẽ hữu ích.

Answer 2

Note: For this to work in Mozilla, the background-attachment property must be set to "fixed".

Liệu có bất kỳ ảnh hưởng?

-

Bạn chỉ có 10 hình ảnh, chỉ cần xác định lớp css cho mỗi hình. Bằng cách đó bạn có thể chỉ định tương đối x phối hợp.

ps. Tôi hy vọng bạn không sử dụng css chính xác đó, áp dụng kiểu đó cho: hover sẽ áp dụng cho tất cả các liên kết trên trang. Bạn chỉ nên áp dụng nó cho phong cách chụp ảnh.

a { display: block; 
    float: left; 
    width: 25px; 
    height: 25px; 
    background: url("test.jpg") 0 -25px no-repeat; 
    } 
.thumb1 { background-position: 0 0; } 
.thumb2 { background-position: -25px 0; } 
.thumb3 { background-position: -50px 0; } 
.thumb1:hover { background-position: 0 -25px; } 
.thumb2:hover { background-position: -25px -25px; } 
.thumb3:hover { background-position: -50px -25px; } 

Ngoài ra còn có opacity..

Answer 3

Tôi tin rằng câu trả lời của Lou làm những gì bạn muốn nó làm - bạn chỉ cần phải xác định một lớp cho mỗi tiểu bang và đặt cả tọa độ x và y.

Nếu bạn muốn hiệu ứng mờ dần, thì jQuery gives you a way to do it. Điều này có lẽ có thể giúp bạn có được những gì bạn muốn nếu đó là trường hợp:

$(".thumb").css("opacity", 0.33); 
$(".thumb").hover(
    function() { 
     $(this).fadeTo(300, 1.0); 
    }, 
    function() { 
     $(this).fadeTo(1, 0.33); 
    } 
); 

EDIT: Updated dựa trên thông tin phản hồi. Opacity ban đầu hiện đã được đặt.

Answer 4

Một số thiếu sót nhỏ, lỗi chính tả và mã không cần thiết trong ví dụ trước. Đoán mã của bạn có thể trông giống như thế này:

<style> 
a { float: left; width: 25px; height: 25px; background-image: url("250_x_50_spriteimage.jpg"); } 
a.thumb1 { background-position: 0 0; } 
a.thumb2 { background-position: -25px 0; } 
a.thumb3 { background-position: -50px 0; } 
a { filter: alpha(opacity=30); -moz-opacity:.3; opacity:.3; } 
a:hover { filter: alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; } 
</style> 

<a href="largeimage1.jpg" class="thumb1"></a> 
<a href="largeimage2.jpg" class="thumb2"></a> 
<a href="largeimage2.jpg" class="thumb3"></a> 

Answer 5

cách dễ dàng

{background-position:100% 4px;} 

bạn có thể sử dụng tư cách bà con với pixel để thay background-position-y sở hữu