CSS RGBA الحدود / الخلفية ألفا مزدوجة

StackOverflow https://stackoverflow.com/questions/2626039

  •  26-09-2019
  •  | 
  •  

سؤال

أنا أعمل على موقع ويب يحتوي على الكثير من الشفافية ، واعتقدت أنني سأحاول بناءه بالكامل في RGBA ثم إجراء احتياجات من أجل IE. أحتاج إلى تأثير على نمط "صندوق الوجه" ، حيث يتم تقريب الحدود الخارجية وأقل غموضًا من خلفية الصندوق الذي يحيط به.

المثال الأخير من http://24ways.org/2009/working-with-rgba color يبدو أن هذا ممكن ، لكن لا يبدو لي أن أعمل. عندما أحاول ما يلي:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title>RGBA Test</title>
 <style type='text/css'>
   body {
     background: #000;
     color: #fff;
   }
   #container {
     width: 700px;
     margin: 0 auto;
     background: rgba(255, 255, 255, 0.2);
     border: 10px solid rgba(255, 255, 255, 0.1);
     padding: 20px;
   }
  </style>
</head>
<body>
  <div id='container'>
    This should look like a facebox.
  </div>
</body></html>

يبدو أن الخلفية "تمتد" أسفل حدود العنصر ، مما يؤدي إلى إضافة قيم البكسل معًا. وبالتالي ، عندما تكون كل من الخلفية والحدود شبه شفافة ، ستكون الحدود دائمًا أكثر غموضًا من خلفية العنصر. هذا هو عكس ما أحاول تحقيقه بالضبط ، لكن يبدو أنه من الممكن بناءً على الأمثلة التي رأيتها.

يجب أن أضيف أيضًا أنه لا يمكنني استخدام عنصر آخر داخل الحاوية ، لأنني سأستخدم أيضًا حدودًا الحدود على الحاوية للحصول على زوايا مدورة ، ومربعات WebKit زوايا العناصر الطفل إذا كان لديهم خلفية تم تعيينه ، مما يعني بشكل أساسي الحدود الخارجية المدورة مع محتويات مربعة.

آسف ، لا يمكنني نشر صورة لهذا ... يبدو أنه ليس لدي ما يكفي من مندوب لنشر صورة.

هل كانت مفيدة؟

المحلول

يمكنك استخدام الجديد background-clip: padding-box; خاصية للحصول على هذا. يحسب من أين تبدأ الخلفية داخل صندوق. لمزيد من التفاصيل والأمثلة ، تحقق هنا

نصائح أخرى

يؤكد اختبار هذا في Firefox ما تصفه - واستغرق الأمر بعض الوقت لإدراك الآثار المترتبة على هذا! إن وجود الحدود الأقل شفافية لن يكون له أي تأثير على الخلفية الشفافة تحتها ، لأن الحدود هي (كما تقول) مضافة.

في هذه الحالة ، سيتعين عليك محاكاة التأثير الذي تتبعه والعمل بألوان أكثر من ألفا:

background: rgba(128, 128, 128, 0.7);
border: 10px solid rgba(0, 0, 0, 0.1);

جرب هذا:

#container {
    width: 700px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.2);
    border: 10px solid rgba(255, 255, 255, 0.1);
    padding: 20px;

    /* and here is the fix */
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top