하위 요소에 영향을 주지 않고 배경 이미지의 불투명도 설정

하위 요소에 영향을 주지 않고 배경 이미지의 불투명도 설정

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

예

바닥글의 모든 링크에는 사용자 정의 글머리표(배경 이미지)가 필요하며 사용자 정의 글머리표의 불투명도는 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%;
}

당신은 CSS CSS를 할 수 있습니다.linear-gradient()와 함께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 유사 요소를 고려할 수 있습니다.

#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 미 )은 Hack인 z-index 컨텍생성 z-index 에정습 다니있수할값걱해 (의 z-index를 .)(이를 제거하고 상위 래퍼가 양의 z-index를 갖는 다음 데모에서 어떤 일이 일어나는지 확인합니다.)
요소에 이미 z 인덱스가 있으면 이 해킹이 필요하지 않습니다.

이 기술의 데모입니다.

유감스럽게도, 이 답변을 작성할 당시에는 이를 위한 직접적인 방법이 없습니다.필요한 작업:

1. 배경에 반투명 이미지를 사용합니다(좀 더 쉽게).
2. 불투명한 요소를 원하는 어린이 옆에 추가 요소(예: div)를 추가하고 배경을 추가한 후 반투명으로 만든 후 언급된 어린이 뒤에 배치합니다.

또 다른 방법은 CSS Tricks 접근법입니다. 원래 요소의 정확한 크기를 바로 뒤에 삽입하여 우리가 찾고 있는 불투명한 배경 효과를 가짜로 만드는 것입니다.때때로 유사 요소의 높이를 설정해야 합니다.

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

"filter" 속성은 IE7/8에서 작동하기 위해 이중이 아닌 불투명도 비율에 대한 정수가 필요합니다.

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

추신: SO 때문에 편집을 위해 최소 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);
}

위의 코드에 중복이 있을 수 있습니다. 더 정리하고 싶은 사람이 있다면 언제든지 괜찮습니다!

우리는 단지 rgba 색상을 사용하여 불투명도를 가지고 놀지 않음으로써 그것을 알아낼 수 있습니다.

예"background-color: rgba(0,0,0, 0.5)"

샘플:

이전 CSS:

 .login-card {
  // .... others CSS
  background-color: #121e1b;
  opacity: 0.5;
}

받는 사람:

 .login-card {
      // .... others CSS
      background-color: rgba(0, 0, 0, 0.5);
    }

불투명도를 글머리 기호로만 설정해야 한다면 알파 채널을 이미지에 직접 설정하는 것은 어떻습니까?그런데 전체 요소(및 그 아이들)의 불투명도를 변경하지 않고 CSS를 통해 불투명도를 배경 이미지로 설정하는 방법은 없다고 생각합니다.

저는 이 문제에 대한 꽤 좋고 간단한 튜토리얼을 찾았습니다.저는 그것이 잘 작동한다고 생각합니다(그리고 IE를 지원하지만, 저는 제 고객들에게 다른 브라우저를 사용하라고만 말합니다).

RGBa 및 필터를 통해 하위 요소에 영향을 미치지 않는 CSS 배경 투명성

여기에서 그라데이션 지원 등을 추가할 수 있습니다.

위에 추가하자면..새 색상 속성(예: rgba(0,0,0,0)과 함께 알파 채널을 사용할 수 있으므로 이것은 검은색이지만 부모로서 아이에게 영향을 미치지 않도록 불투명도가 0입니다.이것은 Chrome, FF, Safari 및 ...에서만 작동합니다.O인 것 같아요.

육각색을 RGBA로 변환합니다.

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

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

언급URL : https://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements