عتامة لون الخلفية، ولكن ليس النص [نسخة مكررة]

Question

هذا السؤال لديه بالفعل إجابة هنا:

• كيف أعطي النص أو الصورة خلفية شفافة باستخدام CSS؟ 28 إجابة

كيف أجعل المتصفحات المشتركة (بما في ذلك Internet Explorer 6) شفافة لخلفية ملف div بينما يبقى النص مبهما؟

أحتاج إلى القيام بذلك دون استخدام أي مكتبة مثل jQuery، وما إلى ذلك.(ولكن إذا كنت تعرف مكتبة تقوم بذلك، فأنا أرغب في معرفتها حتى أتمكن من إلقاء نظرة على الكود الخاص بها).

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

لقد قمت بإنشاء هذا التأثير على مدونتي كود لاندمان.

ما فعلته كان

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

الشيء المهم هو أن كل الحشو/الهامش والمحتوى يجب أن يكون هو نفسه في كل من .Background و .Foreground.

Answer 4

تخفيف متطلباتك للعمل على 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/ ​

سيعمل على أي متصفح حديث

Answer 5

شكرا @ ديفي لاندمان على 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;
    }
  }