العتامة الخلفية المغلق

يمكنك استخدام CSS 3 :before للحصول على خلفية شبه شفافة ويمكنك القيام بذلك باستخدام حاوية واحدة فقط. استخدام شيء مثل هذا

<article>
  Text.
</article>

ثم تطبيق بعض المغلق

article {
  position: relative;
  z-index: 1;
}

article::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: -1;
  background: url(path/to/your/image);
}

نموذج: http://codepen.io/anon/pen/avdsi

ملاحظة: قد تحتاج إلى ضبط قيم z-index.

يمكن استخدام الطرق التالية لحل مشكلتك:

1. طريقة شفافية CSS alpha (لا تعمل في Internet Explorer 8):

   #div{background-color:rgba(255,0,0,0.5);}
   

2. استخدم صورة PNG شفافة وفقًا لاختيارك.

3. استخدم مقتطف شفرة CSS التالي لإنشاء خلفية شفافة ألفا عبر المستعرض. هنا مثال على #000000 @ 0.4٪ التعتيم

   .div {
       background:rgb(0,0,0);
       background: transparent\9;
       background:rgba(0,0,0,0.4);
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
       zoom: 1;
   }
   .div:nth-child(n) {
       filter: none;
   }
   

لمزيد من التفاصيل حول هذه التقنية ، راجع هذا ، الذي يحتوي على مولد CSS عبر الإنترنت.

أود أن أفعل شيئا مثل هذا

<div class="container">
  <div class="text">
    <p>text yay!</p>
  </div>
</div>

CSS:

.container {
    position: relative;
}

.container::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('/path/to/image.png');
    opacity: .4;
    content: "";
    z-index: -1;
}

يجب أن تعمل. هذا على افتراض أنك مطالب بأن يكون لديك صورة شبه شفافة BTW ، وليس لونًا (يجب عليك فقط استخدام rgba) يفترض أيضًا أنه لا يمكنك تغيير عتامة الصورة مسبقًا في Photoshop.

.transbg{/* 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)";}

يمكنك استخدام Sass 'transparentize.

لقد وجدت أن يكون الأكثر فائدة وسهلة الاستخدام.

transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6) 

مشاهدة المزيد: #TRANSPARENTIZE ($ COLOR، $ $) ASS SASS :: SCRIPT :: VALUE :: COLOR

وذلك لأن div الداخلي يحتوي على 100٪ من عتامة div التي يتداخل فيها (والذي يحتوي على عتامة 40٪).

من أجل التحايل عليه ، هناك بعض الأشياء التي يمكنك القيام بها.

يمكنك إنشاء قسمين منفصلين مثل:

<div id="background"></div>
<div id="bContent"></div>

قم بتعيين عتامة CSS المرغوبة وغيرها من الخصائص للخلفية واستخدم خاصية z-index ( z-index ) لتصميم وضع bContent div ووضعه. مع هذا ، يمكنك وضع علامة div العلوية لقاعدة الخلفية دون الحاجة إلى التعتيم.

خيار آخر هو RGBa . سيتيح لك ذلك تداخل divs الخاص بك مع الاستمرار في تحقيق عتامة div المحددة.

الخيار الأخير هو ببساطة جعل صورة .png شبه شفافة للون الذي تريده في محرر الصور الذي ترغب فيه ، وتعيين خاصية صورة الخلفية إلى عنوان URL للصورة ، ثم لن تضطر إلى القلق بشأن التلطخ مع CSS وفقدان القدرة وتنظيم هيكل div المتداخل.

فقط تأكد من وضع العرض والارتفاع للمقدمة بنفس الصورة مع الخلفية ، أو حاول الحصول على خصائص أعلى وأسفل ويسار ويمين.

<style>
    .foreground, .background {
        position: absolute;
    }
    .foreground {
        z-index: 1;
    }
    .background {
        background-image: url(your/image/here.jpg);
        opacity: 0.4;
    }
</style>

<div class="foreground"></div>
<div class="background"></div>