동적 배경 이미지 변경이 가능합니까?

-1

안녕하세요, 내 페이지에 두 개의 링크가 있고 일부 하위 링크가 표시됩니다 (기본 링크를 클릭 할 때 표시). 이 두 링크는 서로 다른 배경 이미지를 가지고 있습니다.동적 배경 이미지 변경이 가능합니까?

*link1 
-link1underlinkone 
-link1underlinktwo 
*link2 
-link2underlinkone 
-link2underlinktwo 
-link2underlinkthree

두 개의 주 링크에서 배경 이미지를 쉽게 변경할 수 있지만 동일한 배경 스타일을 내 언더 링크에 어떻게 전달해야합니까? 그리고 언더 링크가 있다면 내가 가질 수 있을까요?

편집 : woops 내가 BODY하지 링크/링크의 배경 이미지를 변경하려면 말할 것을 잊었다;

출처

2011-09-27 user935556

시도해 보신 점이 있습니까? 일부 HTML/CSS는 작업중인 내용을 보지 않고도 도움을 줄 수 없기 때문에 편리합니다. –

CSS 클래스 만 사용하십시오. 서로 다른 배경 이미지가 포함 된 서로 다른 클래스를 사용하십시오. –

아마도 css inherit이 작동 할 것입니다. 그렇지 않으면 javascript가 필요하며 jQuery가 바람직합니다. 또는 위의 포스터에서 언급했듯이 수업이 효과가 있습니다. – adeneo

당신은 자신의 서브 링크와 함께 별도의 사업부 년대에 두 메인 링크를 넣어 시도해야합니다). div에 배경을 설정하고 (디스플레이를 none으로 설정하여 보이지 않도록 설정) 모든 링크의 배경을 상속하도록 설정하여 부모 div에서 배경을 가져옵니다.

편집 : 사용 나는

<head> 
    <style type="text/css"> 
    #link1wrapper { 
     background-image: url(background1.jpg); 
     visiblity:hidden; 
    } 
    #link2wrapper { 
     background-image: url(background2.jpg); 
     visiblity:hidden; 
    } 
    .linkmenu a{ 
     background-image: inherit; 
     visibility: visible; 
    } 
    </style> 
</head> 
<body> 

<div id="link1wrapper" class="linkmenu"> 
    *link1 
     -link1underlinkone 
     -link1underlinktwo 
</div> 

<div id="link2wrapper" class="linkmenu"> 
    *link2 
     -link2underlinkone 
     -link2underlinktwo 
     -link2underlinkthree 
</div> 

</body>

편집 아래 만들어진 코드 : 나는 코드를 수정했습니다. 이제는 div의 배경을두고 div를 숨 깁니다. div의 링크를 눈에 보이게 설정하고 모든 링크가 배경을 상속합니다. 당신이 알고 있어야하는 것은 div의 다른 것을 넣지 않는 것입니다. 그렇게 할 경우 스타일을 설정하여 배경을 표시하고 배경을 없음으로 설정해야합니다.

내가 제공 할 수있는 매우 제한된 정보를 바탕으로 생각해 낼 수있는 전부입니다. 코드, 예제 또는 참고 문헌을 사용하지 않았으므로 정확하게 질문에 대답하기가 어렵습니다.

나는 더 나은 여기에 적절한 메뉴 구조를 만들고 싶어 추측이 일에 대한 upvote에 = P

출처

2011-09-27 20:40:18

흠, 그냥 테스트 해봤는데 디스플레이를 none으로 설정하면 링크도 제거됩니다. 나는 그것을 지금 고치는 방법에 일하고있다 –

좋아, 나는 그것을 고쳤다.나는 내 대답을 지금 편집하고있다 –

이 사람은 어디 갔습니까? 그는 질문을 한 다음 사라진 채로 여기 앉아서 의견을 기다리고 있습니다. –

내가 만든 작은 데모입니다 얻을. 사용

http://jsfiddle.net/sg3s/fPu9S/

개의 키 속성 background-image: inheritvisibility: hidden하고있다.

background-image: inherit은 요소가 직접 부모로부터 속성을 상속 받도록합니다. 이미지가 지정되지 않으면 속성이 상속되지 않는다는 것을 의미합니다. 이 때문에 하위 링크/메뉴에 대한 ul을 부모로부터 속성을 상속 받도록 설정해야합니다. ul에서이 이미지를 마스크하고 이 li이 다시 표시되도록해야합니다. visibility이므로 기본 설정은 inherit입니다. visibility:visible.

그래서 실제로 무슨 일이 일어나는지에 대한 설명입니다. 스타일을 상속하는 것은 기본 앵커 내부에 하위 링크를 중첩하지 않는 한 앵커 태그와 함께 사용할 수 없으며 유효하지 않거나 허용 된 코드라고 생각하지 않습니다.

출처

2011-09-27 21:59:41 sg3s

동적 배경 이미지 변경이 가능합니까?

답변

관련 문제