CSS 배경 이미지 불투명도?

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+)을 지원 하는 경우 동일한 부분적으로 투명한 배경 이미지를 두 번 이상 선언 할 수 있습니다 . 이러한 여러 이미지의 불투명도가 합산 될수록 더 많은 배경을 정의 할 수 있습니다.

---

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/

---

Try this trick .. use css shadow with (inset) option and make the deep 200px for example

Code:

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

.

Also for all browsers:

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

and increase number to make fill your box :)

Enjoy!

---

You can put a second element inside the element you wish to have a transparent background on.

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

Then make the '.container-background' positioned absolutely to cover the parent element. At this point you'll be able to adjust the opacity of it without affecting the opacity of the content inside '.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;
}

---

You can't edit the image via CSS. The only solution I can think of is to edit the image and change its opacity, or make different images with all the opacities needed.

---

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

Hack with opacity 0.99 (less than 1) creates z-index context so you can not worry about global z-index values. (Try to remove it and see what happens in the next demo where parent wrapper has positive z-index.)
If your element already has z-index, then you don't need this hack.

Demo.

---

Try this

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

---

Here is another approach to setup gradient and stransparency with CSS. You need to play arround with the parameters a bit though.

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

So to say its the body::after you are looking for. This way the code for your body is not changed or altered only the background where you can make changes where necessary.

참고URL : https://stackoverflow.com/questions/6890218/css-background-image-opacity