CSS 배경 이미지 불투명도?

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

#id {
  position: relative;
  opacity: 0.99;
}

#id::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url('image.png');
  opacity: 0.3;
}

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

데모 .

다음은 CSS로 그라디언트 및 불투명도를 설정하는 또 다른 방법입니다. 그래도 매개 변수로 arround를 재생해야합니다.

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, transparent)),url("gears.jpg"); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* Chrome10+,Safari5.1+ */
background-image:    -moz-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* FF3.6+ */
background-image:     -ms-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* IE10+ */
background-image:      -o-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* Opera 11.10+ */
background-image:         linear-gradient(to bottom, transparent, transparent),url("gears.jpg"); /* W3C */

body {
  ' css code that goes in your body'
}

body::after {
  background: url(yourfilename.jpg);
  content: "";
  opacity: 0.6;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;   
  width:auto;
  height: 100%;
  }

그래서 당신이 찾고있는 그 몸 :: 후에 말하십시오. 이렇게하면 신체의 코드가 변경되지 않거나 필요한 경우 변경할 수있는 배경 만 변경됩니다.