간단한 xxx yyy {} CSS 선택기가 작동하지 않습니다 - 이유가 무엇입니까?

Question

나는 겉으로는 간단한 HTML 구조가 있습니다

<div class="featured-image img-wrapper full-width"> 
    <a href="http://localhost/wordpress/?p=26"> 
    <img ... /> 
    </a> 
</div> 

가 지금은 (불행하게도 자신의 클래스가없는)는 A를 대상으로 지정할을, 그래서 나는이 CSS

.img-wrapper a { 
    background-image:url(../images/bkgs/stripes_tiny_08.png); 
    background-repeat:repeat; 
} 

를 사용하지만 아무 일도 일어나지 않는다 이 요소에! 확실히 배경 이미지 자체가 아니며 단순한 색상을 시도했습니다. 이상한 점은 다른 비슷한 구조가 페이지 위쪽에 있으며 선택기가 작동한다는 것입니다. 방화범은 (대상 a는 끝에) 다음과 같은 CSS 경로 I 아이디어 나갈거야

working: html.js body.single div#page.wrap div#main-container.container div#primary.site-content div#content article#post-26.post-26 div.featured-image a.img-link 
not wrk: html.js body.single div#page.wrap div#main-container.container div#primary.site-content div#content aside#yarpp_widget-2.widget div.bloglist article.post div.three div.featured-image a 

을 보여줍니다. 우선하는 CSS 선언을 찾지 못했습니다. 내가 어떻게 그걸 목표로 삼을 수 있을지 생각해?

EDIT : 대상 a에 a : hover opacity가 설정된 img가 포함되어 있습니다. 내가 볼 수있는 그런 식으로 그 배경 색상의 작품이 아닌 배경 이미지 그러나

Answer 1

이 효과를 얻으려고합니까? http://jsfiddle.net/r48ST/1/

[편집] 이것은 효과가 http://jsfiddle.net/r48ST/2/ 인 이미지에 약간의 불투명도를 추가 한 것입니다. 또한 효과가 충분하지 않은 불투명도에 일부 전환 효과를 적용하십시오.

Answer 2

제거 IMG (이 투명하지의 경우) 충돌

: CSS 명령의 끝에서 중요한

• 넣어! .
• 또는 인라인 스타일로 시도하십시오.

Answer 3

<a> 태그의 크기를 지정하지 않으면 태그에 포함 된 <img> 태그의 크기를 준수합니다. 따라서 적용한 배경 이미지는 <img>으로 오버레이됩니다. 반복을 켜는 것은 배경 이미지를 요소 내에서 (자른 또는 전체적으로) 여러 번 반복합니다. 요소에 너비와 높이를 감싸는 이미지의 너비와 높이보다 크게하면 배경이 보입니다.

나는 이것이 당신이 직면 한 문제 였기를 바랍니다. 그렇지 않으면, 더 많은 코드 또는 데모를 게시 할 수 있다면 더 나은 도움을 드릴 수 있습니다.

 

편집 : 난 그냥 대해 편집을 발견 : 불투명도를 가져. 제가 제안하는 것은 스타일링을 다음과 같이 변경한다는 것입니다. a > img:hover { visibility: hidden; }