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

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

Derek 朕會功夫
편집된 질문19일 7월 2015 в 12:16
프로그래밍
html css background-color transparent
4일 8월 2012 в 8:57
146 파운드
질문에 대한 의견 (7)

불투명성의 문제는 종종 이런 일이 일어나기를 원하지 않을 때 콘텐츠에도 영향을 미친다는 것이다.

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

background-color: transparent;

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

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

또는 오른쪽 'alpha'로 저장된 배경 이미지('1px' ~ '1px')를 정의합니다.
(그러려면 '짐프', '페인트'를 사용합니다.Net 또는 이를 가능하게 하는 다른 이미지 소프트웨어.
새로운 이미지를 만들고 배경을 지우고 반투명 색상을 넣은 후 png에 저장하면 됩니다.)

René,의 말처럼 브라우저가 알파를 지원할 경우 'rgba'를 먼저 사용하고 '1px'를 예비로 사용하는 것이 가장 좋습니다.

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

참고 항목 : http://www.w3schools.com/cssref/css_colors_legal.asp.

Demo : [My JSFiddle](http://jsfiddle.net/APSnL/68/)

Jerska
편집된 답변4일 8월 2017 в 12:20
해설 (2)
해결책

불투명도는 당신에게 투명성 또는 투명성을 줍니다. 예 [Fiddle here][1]을 참조하십시오.

-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/ 참조

Adrien Be
편집된 답변24일 2월 2014 в 11:35
해설 (12)

*배경색의 기본값은 배경색입니다.

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

해설 (2)

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 */
해설 (0)

조금 늦게 것이라고 자신하고 있지만 어떤 사람이 될 수 있습니다 이 게시물을 관용으로충만하신 믿엇어요 등 논의 내가 찾은 답은 내가 찾던 그때 내 스스로 시행하십시오 I& # 39; d post on it.

39, s 와 함께 포함된 내용은 다음 이스피들 .PNG& 레이어에는 투명도입니다. # 39 jerska&, s, s # 39 는 CSS 의 속성에 대해 투명도로 div& 솔루션:

http://jsfiddle.net/jyef3fqr/

HTML:

   toggle
   <div id="box" style="display:none;" ></div>
   toggle
   <div id="box2" style="display:none;"></div>
   toggle
   <div id="box3" style="display:none;" ></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/ 내가 만드는 데 사용되고 있다 (paint.net) 또는 오히려 png& # 39 의 png& 투명해집니다 # 39 의 투명해집니다 bg& 함께 # 39 의.

해설 (0)
    /*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 */
해설 (1)