CSS에서 div 배경색을 투명하게 만드는 방법

CSS3을 사용하지 않습니다. 그래서 사용할 수 없습니다 opacity또는 filter속성. 이러한 속성을 사용하지 않으면 어떻게 background-color투명성을 만들 수 div있습니까? 이 링크 에서 일종의 텍스트 상자 예제 여야합니다 . 여기에서 텍스트 상자 배경색이 투명합니다. 위에서 언급 한 속성을 사용하지 않고 동일하게 만들고 싶습니다.

불투명도는 반투명 또는 투명도를 제공합니다. Fiddle here 예제를 참조 하십시오 .

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Good browsers */

참고 : 이들은 CSS3 속성이 아닙니다

http://css-tricks.com/snippets/css/cross-browser-opacity/를 참조 하십시오

문제 opacity는 종종 이런 일이 일어나지 않기를 원할 때 콘텐츠에도 영향을 미친다는 것입니다.

요소를 투명하게하려면 다음과 같이 쉽습니다.

background-color: transparent;

그러나 색상을 원한다면 다음을 사용할 수 있습니다.

background-color: rgba(255, 0, 0, 0.4);

또는 오른쪽으로 저장된 배경 이미지 ( 1pxby 1px)를 정의하십시오 alpha.
(이를 수행하려면 Gimp, Paint.Net또는이를 수행 할 수있는 다른 이미지 소프트웨어를 사용하십시오.
새 이미지를 만들고 배경을 삭제하고 반투명 색상을 넣은 다음 png로 저장하십시오.)

René이 말했듯 이 브라우저가 알파를 지원하지 않는 경우 rgba첫 번째 이미지와 1pxby 1px이미지를 모두 대체로 사용 하는 것이 가장 좋습니다 .

background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);

참조 : http://www.w3schools.com/cssref/css_colors_legal.asp를 .

데모 : My JSFiddle

투명 은 배경색 의 기본값입니다

http://www.w3schools.com/cssref/pr_background-color.asp

에서 https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

배경색을 설정하려면

/* Hexadecimal value with color and 100% transparency*/
background-color: #11ffee00;  /* Fully transparent */

/* Special keyword values */
background-color: transparent;

/* HSL value with color and 100% transparency*/
background-color: hsla(50, 33%, 25%, 1.00);  /* 100% transparent */

/* RGB value with color and 100% transparency*/
background-color: rgba(117, 190, 218, 1.0);  /* 100% transparent */

토론에 약간 늦었을 수도 있지만 필연적으로 누군가 가이 게시물을 우연히 발견 할 것입니다. 나는 내가 찾고있는 대답을 찾았고 내 자신의 의견을 게시 할 것이라고 생각했습니다. 다음 JSfiddle에는 .PNG를 투명하게 레이어링하는 방법이 포함되어 있습니다. Jerska는 div의 CSS에 대한 투명성 속성에 대해 언급했습니다 : http://jsfiddle.net/jyef3fqr/

HTML :

   <button id="toggle-box">toggle</button>
   <div id="box" style="display:none;" ><img src="x"></div>
   <button id="toggle-box2">toggle</button>
   <div id="box2" style="display:none;"><img src="xx"></div>
   <button id="toggle-box3">toggle</button>
   <div id="box3" style="display:none;" ><img src="xxx"></div>

CSS :

#box {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:1;
}
#box2 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
      #box3 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
 body {background-color:#c0c0c0; }

JS :

$('#toggle-box').click().toggle(function() {
$('#box').animate({ width: 'show' });
}, function() {
$('#box').animate({ width: 'hide' });
});

$('#toggle-box2').click().toggle(function() {
$('#box2').animate({ width: 'show' });
}, function() {
$('#box2').animate({ width: 'hide' });
});
$('#toggle-box3').click().toggle(function() {
$('#box3').animate({ width: 'show' });
 }, function() {
$('#box3').animate({ width: 'hide' });
});

그리고 내 원래 영감 : http://jsfiddle.net/5g1zwLe3/ 또한 투명한 PNG 또는 투명한 BG가있는 PNG를 만들기 위해 paint.net을 사용했습니다.

    /*Fully Opaque*/
    .class-name {
      opacity:1.0;
    }

    /*Translucent*/
    .class-name {
      opacity:0.5;
    }

    /*Transparent*/
    .class-name {
      opacity:0;
    }

    /*or you can use a transparent rgba value like this*/
    .class-name{
      background-color: rgba(255, 242, 0, 0.7);
      }

    /*Note - Opacity value can be anything between 0 to 1;
    Eg(0.1,0.8)etc */