Y 축에서만 CSS 배경 위치 변경

StackOverflow https://stackoverflow.com/questions/817866

  •  03-07-2019
  •  | 
  •  

문제

좋아 ... 그래서 여기 문제가 있습니다.

10 (10) 25px x 25px 아이콘으로 구성된 CSS 스프라이트 이미지가 수평으로 배치되어 250px 너비의 스프라이트 이미지를 초래합니다.

이 25x25 이미지를 축소판으로 사용하고 있습니다. 이 이미지에서 초기 시야에서 30%의 불투명도를 갖고자하며 사용자가 그들을 맴돌 때 불투명도는 100% (1) 여야합니다.

그래서 내가 한 일은 불투명도가 30%로 두 번째 줄의 이미지를 만드는 것이 었습니다. 이제 250px x 50px의 스프라이트 이미지가 있습니다. 100%에서 상위 25px, 최하위 25px는 30%입니다.

다음과 같이 html을 설정합니다.

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

그리고 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; }

그러나 불행히도 이것은 불행히도 작동하지 않는 것처럼 보이지 않습니다. 배경 위치 Y는 Firefox에서 지원되지 않거나 표준이 아니지만 IE 특정입니다).

아이디어는 우리가 (만) 스프라이트 이미지를 y 축을 따라 바꾸고 x 축을 그대로두고 싶어한다는 것입니다 (또는 이전 클래스에서 설정된).

이에 대한 간단한 CSS 솔루션이 없다면 -이 불투명도 효과는 jQuery로 수행 할 수 있습니까? 따라서 엄지 손가락은 30% 불투명도로로드하고 사용자가 호버 할 때 100% 불투명도로 전환됩니까?

많은 감사,

중.

도움이 되었습니까?

해결책

원하는 효과를 달성하기 위해 두 번째 아이콘 세트 나 JavaScript 사용이 필요하지 않습니다.

Lou가 지적했듯이 사용 opacity 아이콘을 30% 또는 완전히 보이게합니다. 엉망이 될 필요가 없습니다 background-position 더 이상.

계속해서 다음과 같이 스타일을 정의하십시오.

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; }

CSS 코드의 유효성 검사에 대해 걱정하는 경우 IE 특정 부품 (유효성 검사하지 않음)을 사용하여 구체적으로 타겟팅 된 CSS 파일에 넣으십시오. 조건부 의견.

도움이되기를 바랍니다.

다른 팁

나는 Lou의 대답이 당신이 원하는 일을하는 것을 믿습니다. 각 상태에 대한 클래스를 정의하고 X와 Y 좌표를 모두 설정하면됩니다.

페이딩의 효과를 원한다면 jQuery는 당신에게 그것을 할 수있는 방법을 제공합니다. 그렇다면 아마도 당신이 원하는 것을 얻을 수 있습니다.

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

편집하다: 피드백을 기반으로 업데이트되었습니다. 초기 불투명도가 설정되었습니다.

쉬운 방법

{background-position:100% 4px;}

Pixel과 함께 부모를 사용하여 배경 포지션 -Y 속성을 대체 할 수 있습니다.

참고 : 이것이 Mozilla에서 작동하려면 백그라운드 상착 속성을 "고정"하도록 설정해야합니다.

베어링이 있습니까?

--

10 개의 이미지 만 있으면 각 이미지에 대한 CSS 클래스 만 정의하십시오. 이렇게하면 상대 X 코드를 지정할 수 있습니다.

추신. 정확한 CSS를 사용하지 않기를 바랍니다. 해당 스타일을 A : 호버는 페이지의 모든 링크에 적용됩니다. 이미지화 된 스타일에만 적용해야합니다.

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; }

도 있습니다 불투명..

이전 예제에서 일부 작은 누락, 오타 및 불필요한 코드. 코드가 다음과 같이 보일 수 있다고 생각합니다.

<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>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top