it-swarm.dev

CSS الأساسي - كيفية تراكب DIV مع DIV شبه شفاف في الأعلى

أواجه صعوبة في جعل هذا العرض صحيحًا في المتصفح (Chrome). لدي غلاف يحتوي على جميع عناصر HTML ، وأريد الحصول على DIV (دعنا نسميها div-1) التي تحتوي على صورة ولديها علامة تراكب فوقها على اليسار ، كما رسمت في هذا الصورة ... أي حلول سريعة؟

div bg with overlay semi transparent div

59
TM23

إليك حل CSS خالص ، على غرار إجابة DarkBee ، ولكن دون الحاجة إلى رمز .wrapper إضافي:

.dimmed {
  position: relative;
}

.dimmed:after {
  content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}

أنا أستخدم rgba هنا ، لكن بالطبع يمكنك استخدام طرق شفافية أخرى إذا أردت.

126
marcvangend

باستخدام CSS3 ، لن تحتاج إلى جعل صورتك مع الشفافية.

فقط لديك div مع ما يلي

position:absolute;
left:0;
background: rgba(255,255,255,.5);

المعلمة الأخيرة في الخلفية (.5) هي مستوى الشفافية (الرقم الأعلى هو أكثر معتمة).

مثال Fiddle

21
General_Twyckenham
.foo {
   position : relative;
}
.foo .wrapper {
    background-image : url('semi-trans.png');
    z-index : 10;
    position : absolute;
    top : 0;
    left : 0;
}

<div class="foo">
   <img src="example.png" />
   <div class="wrapper">&nbsp;</div>
</div>
15
DarkBee

بالنسبة إلى div-Element ، يمكنك فقط تعيين العتامة عبر الفصل لتمكين أو تعطيل التأثير.

.mute-all {
   opacity: 0.4;
}
8
Andreas Krohn

مثل الإجابة السابقة ، لكنني وضعت :: من قبل ، فقط لأغراض التراص. إذا كنت ترغب في تضمين نص فوق التراكب (حالة استخدام شائعة) ، فسيؤدي استخدام :: before إلى إصلاح ذلك.

.dimmed {
  position: relative;
}

.dimmed:before {
  content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}
5
Pat Cheung