투명한 CSS 배경색

투명한 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
}

---

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

---

다음은 색상이라는 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)

---

이 시도:

   opacity:0;

IE8 이하

filter:Alpha(opacity=0); 

W3Schools의 불투명도 데모

참고 URL : https://stackoverflow.com/questions/11184117/transparent-css-background-color