불투명도의 배경 색상이지만,텍스트[중복]

Question

이 질문은 이미 있는 대답을 여기:

• 어떻게 제공하는 텍스트나 이미지는 투명한 배경을 사용하여 CSS? 28 답변

게 하려면 어떻게 해야 하 크로스 브라우저(인터넷 익스플로러를 포함하여 6)에 대한 투명 배경 div 텍스트는 남아 있는 불투명한?

나는 그것을 할 필요가있을 사용하지 않고 라이브러리 등과 같은 jQuery,etc.(그러나 만약 당신이 알고 있는 라이브러리가 나가는지 알고 싶어요 그래서 나는 볼 수 있습니다 그들의 코드).

Answer 1

RGBA를 사용하십시오!

.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: transparent IE 웹 브라우저의 경우 조건부 의견 또는 이와 유사한 조건부를 통해 제공됩니다!

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

Answer 2

나는 알파 트랜스 펜트 PNG를 사용합니다.

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

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

Answer 3

내 블로그에 그 영향을 만들었습니다 Landman Code.

내가 한 일은

#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>

모든 패딩/마진과 컨텐츠가 .foreground와 같은 .Background에서 동일 해야하는 중요한 것.

Answer 4

편안하게 요구하는 작업에 IE6 과 기존 브라우저를 사용할 수 있습::하기 전에 표시:inline-block

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/ ​

그것은 모든 현대적인 브라우저

Answer 5

Davy-Landmann에게 감사합니다 https://stackoverflow.com/a/638064/417153. 그것이 내가 찾고 있던 것입니다! 코드가 적은 동일한 효과 :

  @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;
    }
  }