투명한 CSS 배경색

글꼴에 영향을주지 않고 불투명도를 사용하여 목록 메뉴의 배경을 사라지게 만들고 싶습니다. CSS3로 가능합니까?

이제 다음 과 같이 CSS 속성에서 rgba 를 사용할 수 있습니다 .

.class {
    background: rgba(0,0,0,0.5);
}

0.5는 투명도 이며 디자인에 따라 값을 변경합니다.

라이브 데모 http://jsfiddle.net/EeAaB/

더 많은 정보 http://css-tricks.com/rgba-browser-support/

다음 세 가지 옵션을 염두에 두십시오 (3 번을 원합니다).

1) 전체 요소가 투명합니다.

visibility: hidden;

2) 전체 요소가 다소 투명합니다.

opacity: 0.0 - 1.0;

3) 요소 의 배경 만 투명합니다.

background-color: transparent;

네, 가능합니다. 바로 사용 RGBA 구문을 당신의 배경 색상을 위해.

.menue{
  background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
}

다음은 색상이라는 CSS를 사용하는 예제 클래스입니다.

.semi-transparent {
  background: yellow;
  opacity: 0.25;
}

이렇게하면 25 % 불투명 (색상) 및 75 % 투명한 배경이 추가됩니다.

주의 안타깝게도 불투명도는 연결된 전체 요소에 영향을줍니다 .
따라서 해당 요소에 텍스트가있는 경우 텍스트도 25 % 불투명도로 설정됩니다. :-(

이를 극복하는 방법은 rgba또는 hsla메서드 를 사용 하여 원하는 배경 "색상"의 일부로 투명도를 표시하는 것입니다. 이렇게하면 요소에있는 다른 항목의 투명도와 관계없이 배경 투명도를 지정할 수 있습니다.

다음은 다른 요소에 영향을주지 않고 파란색 배경을 75 % 투명도로 설정하는 세 가지 방법입니다.

• background: rgba(0%, 0%, 100%, 0.75)
• background: rgba(0, 0, 255, 0.75)
• background: hsla(240, 100%, 50%, 0.75)

이 경우 background-color:rgba(0,0,0,0.5);가 가장 좋은 방법입니다. 예를 들면 :background-color:rgba(0,0,0,opacity option);

이를 달성하려면 background-color요소 의을 수정해야합니다 .

(반) 투명 색상을 만드는 방법 :

• CSS 색상 이름 transparent은 완전히 투명한 색상을 만듭니다.

  용법:

    .transparent{
      background-color: transparent;
    }
  

• 사용 rgba또는 hsla당신이에 알파 채널 (투명도)를 추가 할 수있는 기능, 색상 rgb및 hsl기능. 알파 값의 범위는 0-1입니다.

  용법:

    .semi-transparent-yellow{
      background-color: rgba(255, 255, 0, 0.5);
    }
    .transparent{
      background-color:  hsla(0, 0%, 0%, 0);
    }
  

• 이미 언급 한 솔루션 외에도 알파 값 ( #RRGGBBAA또는 #RGBA표기법 )이 있는 HEX 형식을 사용할 수도 있습니다 .

  이것은 꽤 새롭지 만 (CSS Color Module Level 4에 포함) 이미 더 큰 브라우저에서 구현되었습니다 (죄송합니다. IE 없음).

  이것은 알파 채널 (불투명도)도 16 진수 값으로 처리하여 0-255 ( FF)의 범위를 만들기 때문에 다른 솔루션과 다릅니다 .

  용법:

    .semi-transparent-yellow{
      background-color: #FFFF0080;
    }
    .transparent{
      background-color: #0000;
    }
  

다음과 같이 시도해 볼 수도 있습니다.

• transparent:

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: transparent;
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `transparent`
</div>

• rgba():

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: rgba(0, 255, 0, 0.3);
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `rgba()`
</div>

• #RRGGBBAA:

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: #FF000060
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `#RRGGBBAA`
</div>

이 시도:

opacity:0;

IE8 이하

filter:Alpha(opacity=0); 

W3Schools의 불투명도 데모

예, 다음과 같이 일반 텍스트를 사용할 수 있습니다.

.someDive{
    background:transparent 
}