CSS를 사용하여 텍스트 또는 이미지에 투명한 배경을 제공하는 방법

질문 : CSS를 사용하여 텍스트 또는 이미지에 투명한 배경을 제공하려면 어떻게합니까?

---

CSS 만 사용하여 background 을 반투명하게 만들지 만 요소의 내용 (텍스트 및 이미지)을 불투명하게 만들 수 있습니까?

텍스트와 배경을 두 개의 별도 요소로 사용하지 않고이 작업을 수행하고 싶습니다.

시도 할 때 :

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}

<p>
  <span>Hello world</span>
</p>

자식 요소가 부모의 불투명도를받는 것처럼 보이므로 opacity:1 은 opacity:0.6 에 상대적입니다.

답변

---

반투명 PNG 이미지를 사용하거나 CSS 3을 사용합니다.

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

다음은 css3.info, Opacity, RGBA 및 타협 (2007-06-03)의 기사입니다.

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>

출처 : https://stackoverflow.com/questions/806000/how-do-i-give-text-or-an-image-a-transparent-background-using-css