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

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

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

사용하다rgba():

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

이렇게 하면 50%의 불투명도가 제공되는 반면 상자의 내용물은 100%의 불투명도를 유지하게 됩니다.

사용하는 경우opacity:0.5배경뿐만 아니라 내용도 희미해집니다.따라서 사용하지 마십시오.

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

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

투명 배경을 회색으로 만들려면 다음을 시도하십시오.

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

알기 좋은.

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

메모

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

1x1 반투명 PNG를 사용하지 마십시오. PNG 크기를 최대 10x10, 100x100 등으로 조정하십시오.당신의 페이지에 있는 모든 것이 말이 되는 것.(200x200 PNG를 사용했는데 0.25kb에 불과했기 때문에 파일 크기에 대해 크게 걱정할 필요가 없습니다.)

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

드림위버 CS5는 탱킹하고 있었습니다.DOS로 플래시백을 하고 있었습니다!!!제가 스크롤을 하거나, 텍스트를 삽입하거나, 기본적으로 무엇이든 하려고 할 때마다 DW는 반투명 영역을 한 번에 1x1 픽셀씩 다시 로드하려고 했습니다.좋아요!

Adobe 기술 지원부는 문제가 무엇인지 알지도 못했지만 파일을 다시 빌드하라고 했습니다(부수적으로 시스템에서 작동했습니다).제가 css 파일에 첫 번째 투명 PNG를 로드했을 때 비로소 그 문서는 다시 깊이 파고들었습니다.

그리고 다른 도움 사이트에서 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 
}

이것은 단순하고 분류적입니다.아래와 같이 hsla css 함수를 사용합니다.

.transparent {
   background-color: hsla(0,0%,4%,.4);
}

사용해 보십시오.

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

언급URL : https://stackoverflow.com/questions/4790563/how-do-i-make-a-semi-transparent-background