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

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

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

문제는opacity이는 콘텐츠에도 영향을 미치지만 이러한 현상이 발생하지 않으려는 경우가 많습니다.

요소를 투명하게 유지하려면 다음과 같이 간단합니다.

background-color: transparent;

그러나 색상으로 표시하려면 다음을 사용할 수 있습니다.

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

또는 배경 이미지를 정의합니다(1px타고1px) 권한으로 저장됨alpha.
(사용하려면,Gimp,Paint.Net또는 다른 이미지 소프트웨어를 사용할 수 있습니다.
새로운 이미지를 생성하고 배경을 삭제한 후 반투명 색상을 넣은 후 png에 저장하면 됩니다.)

르네가 말했듯이, 가장 좋은 것은 두 가지를 혼합하는 것입니다.rgba처음부터 끝까지1px타고1px브라우저가 알파를 지원하지 않는 경우 폴백으로 이미지 표시:

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

http://www.w3schools.com/cssref/css_colors_legal.asp 도 참조하십시오.

데모: 나의 JSFidle

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

-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/ 을 참조하십시오.

기본값은 background-color

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

논의가 조금 늦어질 수도 있지만, 불가피하게 저처럼 누군가가 이 게시물에 걸려들 것입니다.저는 제가 찾던 답을 찾았고 그것에 제 자신의 의견을 게시하려고 생각했습니다.다음 JS Fidle에는 계층화 방법이 포함되어 있습니다.PNG는 투명성이 있습니다.저스카가 디브의 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' });
});

그리고 저의 독창적인 영감은 paint.net 입니다. 저는 또한 투명한 PNG, 혹은 투명한 BG를 가진 PNG를 만들기 위해 http://jsfiddle.net/5g1zwLe3/ 을 사용했습니다.

다음과 같은 것을 사용합니다.

<div style='background-color: rgba(0, 0, 0, 0.4);'>

이렇게 하면 해당 div의 배경색이 검은색으로 설정되지만 40% 투명합니다.이렇게 해도 div의 투명성 텍스트나 내용은 변경되지 않습니다.

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

언급URL : https://stackoverflow.com/questions/11807286/how-to-make-div-background-color-transparent-in-css