it-swarm.asia

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

أنا أستخدم شيئًا مشابهًا للرمز التالي:

<div style="opacity:0.4; background-image:url(...);">
    <div style="opacity:1.0;">
        Text
    </div>
</div>

كنت أتوقع هذا لجعل الخلفية لديها عتامة 0.4 والنص لديهم عتامة 100 ٪. بدلا من ذلك لديهم كلا من عتامة 0.4.

599
John Wheal

يرث الأطفال عتامة. سيكون غريبًا وغير مريح إذا لم يفعلوا ذلك.

يمكنك استخدام ملف PNG شفاف لصورة الخلفية الخاصة بك ، أو استخدام لون RGBa (a لـ alpha) لون الخلفية.

مثال ، 50٪ تلاشى الخلفية السوداء:

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>
1038
AlienWebguy

يمكنك استخدام 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.

160
daniels

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

  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 عبر الإنترنت.

43
Achyuth Ajoy

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

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

27
Peter Lada
.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)";}
7
Wael Wafik

يمكنك استخدام 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

6
ilan weissberg

وذلك لأن 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 المتداخل.

3
zillaofthegods

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

<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>
2
Niño Angelo Orlanes Lapura