자식 요소의 불투명도에 영향을주지 않고 배경 이미지의 불투명도를 설정할 수 있습니까?

예

바닥 글의 모든 링크에는 사용자 정의 글 머리 기호 (배경 이미지)가 필요하며 사용자 정의 글 머리 기호의 불투명도는 50 % 여야합니다.

HTML

<div id="footer">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</div>  

CSS

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
}  

내가 시도한 것

목록 항목의 불투명도를 50 %로 설정하려고 시도했지만 링크 텍스트의 불투명도도 50 %입니다. 자식 요소의 불투명도를 재설정하는 방법이없는 것 같습니다.

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
    /* will also set the opacity of the link text */        
    opacity: 0.5;
}

또한 rgba를 사용해 보았지만 배경 이미지에는 영향을 미치지 않습니다.

#footer ul li {
    /* rgba doesn't apply to the background image */
    background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%;
}

linear-gradient()와 함께 CSS 를 사용할 수 있습니다 rgba().

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
  background: black;
  color: white;
}

<div><span>Hello world.</span></div>

이미지를 이미지 편집기로 가져 와서 불투명도를 낮추고 .png로 저장 한 다음 대신 사용하십시오.

이것은 모든 브라우저에서 작동합니다

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

투명성이 전체 컨테이너 및 해당 하위 항목에 영향을 미치지 않게하려면이 해결 방법을 확인하십시오. 부모가 상대적으로 위치하는 자녀가 있어야합니다.

http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/ 에서 데모를 확인하십시오 .

이미지를 글 머리 기호로 사용하는 경우 : before pseudo 요소를 고려할 수 있습니다.

#footer ul li {
}

#footer ul li:before {
    content: url(/images/arrow.png);
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity:.50;
}

div : after 또는 div : before에 이미지를 넣고 해당 "가상 div"에 불투명도를 설정할 수 있습니다

div:after {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
  opacity: 0.25;
}

여기 http://css-tricks.com/snippets/css/transparent-background-images/에 있습니다

#footer ul li {
  position: relative;
  opacity: 0.99;
}

#footer ul li::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(/images/arrow.png) no-repeat 0 50%;
  opacity: 0.5;
}

불투명도 .99 (1 미만)로 해킹하면 z- 인덱스 컨텍스트가 생성되므로 전역 z- 인덱스 값에 대해 걱정할 필요가 없습니다. (제거하고 부모 래퍼에 양의 z- 인덱스가있는 다음 데모에서 어떤 일이 발생하는지 확인하십시오.)
요소에 이미 z- 색인이있는 경우이 해킹이 필요하지 않습니다.

이 기술의 데모 .

불행히도이 답변을 작성할 당시에는 직접 수행 할 수있는 방법 없습니다 . 다음을 수행해야합니다.

1. 배경에 반투명 이미지를 사용하십시오 (훨씬 더 쉬움).
2. 불투명 한 어린이 옆에 div와 같은 추가 요소를 추가하고 배경을 추가하고 반투명하게 한 다음 언급 한 어린이 뒤에 배치하십시오.

또 다른 옵션은 CSS 요소로 의사 요소를 원래 요소의 정확한 크기 바로 뒤에 삽입하여 찾고있는 불투명 한 배경 효과를 위조하는 것입니다. 때로는 의사 요소의 높이를 설정해야합니다.

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

IE7 / 8에서 작동하려면 "filter"속성에 double 대신 불투명도의 백분율 정수가 필요합니다.

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

추신 : 나는 이것을 편집으로 게시하기 위해 최소한 6 개의 변경된 문자가 필요하기 때문에 이것을 대답으로 게시합니다.

사물을 실제로 미세 조정하려면 브라우저 선택 래퍼에 적절한 선택 항목을 배치하는 것이 좋습니다. IE7 및 IE8을 "다른 사람들과 잘 플레이"할 수 없었을 때 이것이 나를 위해 일한 유일한 방법이었습니다.

/* color or background image for all browsers, of course */            
#myBackground {
    background-color:#666; 
}
/* target chrome & safari without disrupting IE7-8 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #myBackground {
        -khtml-opacity:.50; 
        opacity:.50;
    }
}
/* target firefox without disrupting IE */
@-moz-document url-prefix() {
    #myBackground {
        -moz-opacity:.50;
        opacity:0.5;
    }
}
/* and IE last so it doesn't blow up */
#myBackground {
    opacity:.50;
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}

위의 코드에 중복이있을 수 있습니다. 누군가 더 정리하고 싶다면 자유롭게 느끼십시오!

불릿 만 불릿으로 설정해야하는 경우 알파 채널을 이미지에 직접 설정하지 않겠습니까? 그건 그렇고 나는 전체 요소 (및 그 자식들)의 불투명도를 변경하지 않고 CSS를 통해 불투명도를 배경 이미지로 설정하는 방법이 없다고 생각합니다.

위에 추가하기 만하면됩니다. 알파 채널을 새로운 색상 속성과 함께 사용할 수 있습니다. rgba (0,0,0,0) 좋습니다. 검은 색이지만 불투명도가 0이므로 부모에게는 자식에 영향을 미치지 않습니다. 이것은 Chrome, FF, Safari 및 ...에서 작동합니다.

16 진수 색상을 RGBA로 변환

이 문제에 대한 아주 좋고 간단한 자습서를 찾았습니다. 나는 그것이 잘 작동한다고 생각합니다 (IE를 지원하지만 클라이언트에게 다른 브라우저를 사용하도록 지시합니다).

RGBa 및 필터를 통해 자식 요소에 영향을주지 않는 CSS 배경 투명도

거기에서 그라디언트 지원 등을 추가 할 수 있습니다.

#footer ul li
     {
       position:relative;
       list-style:none;
     }
    #footer ul li:before
     {
       background-image: url(imagesFolder/bg_demo.png);
       background-repeat:no-repeat;
       content: "";
       top: 5px;
       left: -10px;
       bottom: 0;
       right: 0;
       position: absolute;
       z-index: -1;
       opacity: 0.5;
    }

이 코드를 사용해보십시오. 나는 그것이 효과가 있다고 생각합니다. 데모를 방문 할 수 있습니다