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);
}
답변
이 트릭을 시도하십시오 .. (삽입) 옵션과 함께 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를 통해 이미지를 편집 할 수 없습니다. 내가 생각할 수있는 유일한 해결책은 이미지를 편집하고 불투명도를 변경하거나 필요한 모든 불투명도로 다른 이미지를 만드는 것입니다.
