반투명 배경을 만들려면 어떻게해야합니까?

다른 영향을 미치지 않고 흰색 배경을 50 % 투명하게 만들어야합니다. 어떻게합니까?

사용 rgba():

.transparent {
  background-color: rgba(255,255,255,0.5);
}

상자의 내용물은 계속 100 % 불투명도를 유지하면서 불투명도는 50 %입니다.

를 사용 opacity:0.5하면 배경뿐만 아니라 내용도 흐려집니다. 따라서 사용하지 마십시오.

이것은 작동하지만이 클래스를 가진 요소의 모든 자식도 그것을 막을 수있는 방법없이 투명 해집니다.

.css-class-name {
    opacity:0.8;
}

투명한 배경을 회색으로 만들려면 pls를 시도하십시오.

   .transparent{
       background:rgba(1,1,1,0.5);
   }

알아 둘만 한

일부 웹 브라우저는 투명한 배경 위에 그림자가있는 텍스트를 렌더링하는 데 어려움이 있습니다. 그런 다음 반투명 1x1 PNG 이미지를 배경으로 사용할 수 있습니다.

노트

IE6는 PNG 파일을 지원하지 않습니다.

1x1 반투명 PNG를 사용하지 마십시오. PNG 크기를 최대 10x10, 100x100 등으로 조정하십시오. (200x200 PNG를 사용했으며 0.25kb에 불과하므로 파일 크기에 대한 실제 우려는 없습니다.)

이 게시물을 방문한 후 투명도가 다양한 3, 1x1 PNG로 웹 페이지를 만들었습니다.

Dreamweaver CS5가 탱킹되었습니다. 나는 DOS에 플래시 백을 가지고 있었다! !! 분명히 스크롤하려고 할 때마다 텍스트를 삽입하고 기본적으로 아무것도하지 않으면 DW는 한 번에 1x1 픽셀의 반투명 영역을 다시로드하려고했습니다 ... YIKES!

Adobe 기술 지원 부서에서는 문제가 무엇인지 알지 못했지만 파일을 다시 작성하라는 메시지를 받았습니다 (실수로 시스템에서 작동 함). 첫 번째 투명 PNG를 css 파일에로드했을 때만 문서가 다시 깊이 빠져 들었습니다.

그런 다음 다른 도움말 사이트에서 Dreamweaver와 충돌하는 PNG에 대한 게시물을 찾았습니다. PNG 크기를 조정하십시오. 그렇게하는 데 단점이 없습니다.

날짜가 있지만이 스레드에 대한 답변은 보편적으로 사용할 수 없습니다. rgba를 사용하여 투명한 컬러 마스크 만들기-배경 이미지로 만드는 방법을 정확하게 설명하지는 않습니다.

내 솔루션은 배경 이미지 또는 컬러 배경에서 작동합니다.

#parent {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 19px;
    text-transform: uppercase;
    border-radius: 50%;
    margin: 20px auto;
    width: 125px;
    height: 125px;
    background-color: #476172;
    background-image: url('https://unsplash.it/200/300/?random');
    line-height: 29px;
    text-align:center;
}

#content {
    color: white;
    height: 125px !important;
    width: 125px !important;
    display: table-cell;
    border-radius: 50%;
    vertical-align: middle;
    background: rgba(0,0,0, .3);
}

<h1 id="parent"><a href="" id="content" title="content" rel="home">Example</a></h1>

div.main{
     width:100%;
     height:550px;
     background: url('https://images.unsplash.com/photo-1503135935062-
     b7d1f5a0690f?ixlib=rb-enter code here0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cf4d0c234ecaecd14f51a2343cc89b6c&dpr=1&auto=format&fit=crop&w=376&h=564&q=60&cs=tinysrgb') no-repeat;
     background-position:center;
     background-size:cover 
}
 div.main>div{
     width:100px;
     height:320px;
     background:transparent;
     background-attachment:fixed;
     border-top:25px solid orange;
     border-left:120px solid orange;
     border-bottom:25px solid orange;
     border-right:10px solid orange;
     margin-left:150px 
}

이 시도:

.transparent
{ 
  opacity:.50;
  -moz-opacity:.50; 
  filter:alpha(opacity=50); 
}