[html] CSS 배경 이미지 불투명도?

Program / 글쓴이

CSS를 사용하여 텍스트 또는 이미지에 투명한 배경을 제공하는 방법과 관련이 있습니까? ,하지만 약간 다릅니다.

색상뿐만 아니라 배경 이미지 의 알파 값을 변경할 수 있는지 알고 싶습니다 . 분명히 다른 알파 값으로 이미지를 저장할 수 있지만 알파를 동적으로 조정할 수 있기를 원합니다.

지금까지 내가 가진 최고는 :

<div style="position: relative;">
    <div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;
                      background-image: url(...); opacity: 0.5;"></div>
    <div style="position: relative; z-index: 1;">
        <!-- Rest of content here -->
    </div>
</div>

작동하지만 부피가 크고 추악하며 더 복잡한 레이아웃에서 일을 엉망으로 만듭니다.

답변

배경이 반복 될 필요가없는 경우 불투명도가 다른 모든 이미지를 하나 (서로 옆)에 넣은 다음 background-position.

또는 대상 브라우저가 여러 배경 (Firefox 3.6+, Safari 1.0+, Chrome 1.3+, Opera 10.5+, Internet Explorer 9+)을 지원 하는 경우 동일한 부분적으로 투명한 배경 이미지를 두 번 이상 선언 할 수 있습니다 . 이러한 여러 이미지의 불투명도가 합산 될수록 더 많은 배경을 정의 할 수 있습니다.

이 투명 필름을 결합하는 과정을 알파 블렌딩 이라고 하며 (@IainFraser에게 감사드립니다) :

αᵣ = α₁ + α₂(1-α₁)여기서, α0과 1 사이의 범위이다.

답변

CSS 생성 콘텐츠로 희미한 배경을 할 수 있습니다.

http://jsfiddle.net/gaby/WktFm/508/의 데모

HTML 

<div class="container">
        contents
</div>

CSS

.container{
    position: relative;
    z-index:1;
    overflow:hidden; /*if you want to crop the image*/
}
.container:before{
    z-index:-1;
    position:absolute;
    left:0;
    top:0;
    content: url('path/to/image.ext');
    opacity:0.4;
}

그러나 생성 된 콘텐츠를 수정할 수 없으므로 불투명도를 수정할 수 없습니다.

그래도 클래스 및 CSS 이벤트로 조작 할 수 있습니다 ( 하지만 필요에 맞는지 확실하지 않음 ).

예를 들면

.container:hover:before{
    opacity:1;
}

최신 정보

CSS 전환을 사용하여 불투명도를 애니메이션 할 수 있습니다 ( 다시 클래스를 통해 ).

http://jsfiddle.net/gaby/WktFm/507/의 데모

첨가 

-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;

받는 사람 .container:before규칙 1 초에 1 불투명도 애니메이션을 만들 것입니다.

적합성

  • FF 5 ( 4 개도 가능 하지만 설치되어 있지 않습니다. )
  • IE 9 실패 ..
  • Webkit 기반 브라우저는 실패합니다 ( Chrome은 이제 v26을 지원합니다-이전 버전도 지원하지만 현재 빌드로 확인 했음 ).하지만 그들은 인식하고 작업 중입니다 ( https://bugs.webkit.org/show_bug.cgi?id= 23209 )

.. 그래서 지금은 최신 FF 만 지원합니다 .. 하지만 좋은 생각 이네요. 🙂

답변

.class {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
}

복사 출처 : http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

답변

이 트릭을 시도하십시오 .. (삽입) 옵션과 함께 CSS 그림자를 사용하고 예를 들어 깊은 200px를 만드십시오.

암호:

box-shadow: inset 0px 0px 277px 3px #4c3f37;

.

또한 모든 브라우저 :

-moz-box-shadow: inset 0px 0px 47px 3px #4c3f37;
-webkit-box-shadow: inset 0px 0px 47px 3px #4c3f37;
box-shadow: inset 0px 0px 277px 3px #4c3f37;

상자를 채우려면 숫자를 늘립니다. 🙂

즐겨!

답변

투명한 배경을 원하는 요소 안에 두 번째 요소를 넣을 수 있습니다.

<div class="container">
    <div class="container-background"></div>
    <div class="content">
         Yay, happy content!
    </div>
</div>

그런 다음 ‘.container-background’를 절대적으로 상위 요소를 덮도록 배치합니다. 이 시점에서 ‘.container’내부 콘텐츠의 불투명도에 영향을주지 않고 불투명도를 조정할 수 있습니다.

.container {
    position: relative;
}
.container .container-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(background.png);
    opacity: 0.5;
}
.container .content {
    position: relative;
    z-index: 1;
}

답변

이 시도

<div style="background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url(/image.png);background-repeat: no-repeat; background-position: center;"> </div>

답변

CSS를 통해 이미지를 편집 할 수 없습니다. 내가 생각할 수있는 유일한 해결책은 이미지를 편집하고 불투명도를 변경하거나 필요한 모든 불투명도로 다른 이미지를 만드는 것입니다.