배경색의 불투명도(텍스트는 아님)

배경색의 불투명도(텍스트는 아님)

이 질문에는 이미 다음과 같은 답이 있습니다.

CSS를 사용하여 요소 배경의 불투명도를 줄이려면 어떻게 해야 합니까? (29개 답변)

마감됨9년 전에.

의 배경에 대한 크로스 브라우저(Internet Explorer 6 포함)를 투명하게 하려면 어떻게 해야 합니까?div텍스트가 불투명한 상태로 남아 있는 동안?

jQuery 등과 같은 라이브러리를 사용하지 않고 수행해야 합니다(그러나 라이브러리를 알고 있다면 코드를 볼 수 있도록 알고 싶습니다).

Urgba!

.alpha60 {
    /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background-color: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

이 외에도, 당신은 신고해야 합니다.background: transparentIE 웹 브라우저의 경우, 가급적이면 조건부 주석 또는 유사한 방식으로 제공됩니다!

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/ 를 통해

이를 위해 알파 투명 PNG를 사용합니다.

div.semi-transparent {
  background: url('semi-transparent.png');
}

그러나 IE6의 경우 PNG 수정(1, 2)을 사용해야 합니다.

저는 제 블로그 랜드맨 코드에 그 효과를 만들었습니다.

내가 한 일은

#Header {
  position: relative;
}
#Header H1 {
  font-size: 3em;
  color: #00FF00;
  margin:0;
  padding:0;
}
#Header H2 {
  font-size: 1.5em;
  color: #FFFF00;
  margin:0;
  padding:0;
}
#Header .Background {
  background: #557700;
  filter: alpha(opacity=30);
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=30);
  -moz-opacity: 0.30;
  opacity: 0.3;
  zoom: 1;
}
#Header .Background * {
  visibility: hidden; // hide the faded text
}
#Header .Foreground {
  position: absolute; // position on top of the background div
  left: 0;
  top: 0;
}

<div id="Header">
  <div class="Background">
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </div>
  <div class="Foreground">
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </div>
</div>

모든 패딩/마진 및 콘텐츠가 두 가지 모두에서 동일해야 한다는 중요한 점입니다.의 배경.전경.

IE6 및 기존 브라우저에서 작업하기 위한 요구사항 완화::이전 및 표시:인라인 블록

div
{
  display: inline-block;
  position: relative;    
}
div::before
{
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background:red;
  opacity: .2;
}

http://jsfiddle.net/KVyFH/172/ 에서 데모하기

모든 최신 브라우저에서 작동합니다.

https://stackoverflow.com/a/638064/417153 에 대해 @davy-landmann에게 감사드립니다.그게 바로 제가 찾던 거예요!LESS 코드와 동일한 효과:

  @searchResultMinHeight = 200px;
  .searchResult {
    min-height: @searchResultMinHeight;

    position: relative;
    .innerTrans {
      background: white;
      .opacity(0.5);
      min-height: @searchResultMinHeight;
    }
    .innerBody {
      padding: 0.5em;
      position: absolute;
      top: 0;
    }
  }

언급URL : https://stackoverflow.com/questions/637921/opacity-of-background-color-but-not-the-text