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

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

  •  03-07-2019
  •  | 
  •  

سؤال

هل من الممكن باستخدام CSS فقط, لجعل background عنصر شبه شفافة ولكن يكون المحتوى (النص والصور) من عنصر مبهمة?

أود أن إنجاز هذا دون وجود النص و الخلفية كما اثنين من عناصر منفصلة.

عند محاولة:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

يبدو الطفل عناصر تخضع التعتيم من والديهم ، لذلك opacity:1 نسبة إلى opacity:0.6 من الأصل.

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

المحلول

وإما استخدام PNG صورة أو استخدام CSS3: 

background-color:rgba(255,0,0,0.5);

وهنا مقال من css3.info، <م> التعتيم، RGBA وتنازلات (2007-06-03). 

<p style="background-color:rgba(255,0,0,0.5);">
  <span>Hello world</span>
</p>

نصائح أخرى

في فايرفوكس 3 وسفاري 3، يمكنك استخدام RGBA مثل <وأ href = "https://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text/806189#806189" > ذكر جورج Schölly .

وخدعة معروفة هو أنه يمكنك استخدامه في Internet Explorer، وكذلك باستخدام فلتر التدرج. 

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

وعدد عرافة الأول يحدد قيمة ألفا من اللون.

وحل كامل جميع المتصفحات: 

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: 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)";
}

وهذا من <وأ href = "http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/ "يختلط =" noreferrer "> الشفافية خلفية CSS دون التأثير على عناصر تابعة، من خلال رغبا والمرشحات .

لقطات من دليل على النتائج:

وهذا هو عندما باستخدام التعليمات البرمجية التالية:            

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>

وهذا هو أفضل حل أتمكن من الخروج مع، وليس باستخدام CSS 3. ويعمل كبيرة على فايرفوكس، كروم وإنترنت إكسبلورر بقدر ما أستطيع أن أرى.

ووضع DIV الحاويات واثنين من عناصر div الأطفال في نفس المستوى، واحدة للمحتوى، واحدة للخلفية. وباستخدام CSS، لصناعة السيارات في حجم الخلفية لتتناسب مع المحتوى ووضع خلفية الواقع في الجزء الخلفي باستخدام مؤشر z. 

.container {
  position: relative;
}
.content {
  position: relative;
  color: White;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  /* These three lines are for transparency in all browsers. */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: .5;
}
<div class="container">
  <div class="content">
    Here is the content.
    <br/>Background should grow to fit.
  </div>
  <div class="background"></div>
</div>

بسيطة شبه شفافة لون الخلفية الحلول المذكورة أعلاه (CSS3 أو الصور bg) هي أفضل الخيارات.ومع ذلك ، إذا كنت تريد أن تفعل شيئا مربي الحيوانات (على سبيل المثالالرسوم المتحركة, خلفيات متعددة ، الخ) ، أو إذا كنت لا تريد أن تعتمد على CSS3, يمكنك محاولة "جزء تقنية":

.pane, .pane > .back, .pane > .cont { display: block; }

.pane {
    position: relative;
}

.pane > .back {
    position: absolute;
    width: 100%; height: 100%;
    top: auto; bottom: auto; left: auto; right: auto;
}

.pane > .cont {
    position: relative;
    z-index: 10;
}

<p class="pane">
    <span class="back" style="background-color: green; opacity: 0.6;"></span>
    <span class="cont" style="color: white;">Hello world</span>
</p>

تعمل هذه التقنية عن طريق استخدام اثنين من "طبقات" داخل الجزء الخارجي العنصر:

  • واحد ("العودة") الذي يناسب حجم الجزء عنصر دون التأثير على تدفق المحتوى ،
  • و واحد ("تابع") الذي يحتوي على المحتوى يساعد على تحديد حجم الجزء.

على position: relative على جزء مهم ؛ فإنه يقول مرة أخرى طبقة لتناسب إلى جزء حجم.(إذا كنت في حاجة إلى <p> الوسم أن تكون مطلقة ، تغيير جزء من <p> إلى <span> والتفاف كل ذلك في الاطلاق-موقف <p> الوسم.)

أهم ميزة هذه التقنية على غرار تلك المذكورة أعلاه هو جزء لا يجب أن يكون محدد الحجم ؛ كما مشفرة أعلاه ، وسوف تناسب العرض الكامل (عادي كتلة عنصر تخطيط) فقط عالية مثل المحتوى.الجزء الخارجي العنصر يمكن أن يكون الحجم بأي طريقة طالما انها مستطيلة (أيمضمنة كتلة العمل ؛ عادي من العمر مضمنة لن).

كما أنه يعطي الكثير من الحرية في الخلفية ؛ أنت حر في وضع أي شيء حقا في العودة عنصر لا يؤثر على تدفق المحتوى (إذا كنت تريد متعددة الحجم الكامل طبقات فرعية ، فقط تأكد لديهم أيضا الموقف:المطلق, عرض/ارتفاع:100%, أعلى/أسفل/يسار/يمين:السيارات).

واحد الاختلاف للسماح الخلفية أقحم تعديل (عبر أعلى/أسفل/يسار/يمين) و/أو الخلفية تعلق (عن طريق إزالة واحدة من يسار/يمين أو أعلى/أسفل أزواج) هو استخدام CSS التالية بدلا من ذلك:

.pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}

كما هو مكتوب ، وهذا يعمل في فايرفوكس, رحلات السفاري, الكروم, IE8+ ، الأوبرا ، على الرغم من IE6 IE7 و تتطلب CSS إضافي وأن التعبير IIRC, و آخر مرة راجعت الثانية CSS الاختلاف لا يعمل في الأوبرا.

الأشياء لمشاهدة:

  • تعويم العناصر داخل cont طبقة لن تكون واردة.سوف تحتاج إلى التأكد من أنهم مسح أو الواردة ، أو أنها سوف يخرج من القاع.
  • هوامش على جزء العنصر الحشو يذهب على عنصر تابع.لا تستخدم العكس (هوامش على cont أو الحشو على جزء) أو سوف تكتشف الشذوذ مثل الصفحة دائما أوسع قليلا من نافذة المتصفح.
  • كما ذكر كل شيء يحتاج إلى أن تكون كتلة أو مضمنة كتلة.لا تتردد في استخدام <div>s بدلا من <span>s لتبسيط CSS الخاص بك.

أكمل التجريبي ، الرياء المرونة من هذه التقنية من خلال استخدامه جنبا إلى جنب مع display: inline-block, و مع كل auto & محددة widths/min-heights:

.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
	position: relative;
	width: 175px; min-height: 100px;
	margin: 8px;
}

.pane > .back {
	position: absolute; z-index: 1;
	width: auto; height: auto;
	top: 8px; bottom: 8px; left: 8px; right: 8px;
}

.pane > .cont {
	position: relative; z-index: 10;
}

.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>

وهنا يعيش التجريبي هذه التقنية تستخدم على نطاق واسع:

christmas-card-2009.slippyd.com screenshot

فإنه من الأفضل استخدام شبه شفافة .png.

مجرد فتح فوتوشوب, إنشاء 2x2 صورة بكسل (اختيار 1x1 يمكن أن يسبب إنترنت إكسبلورر علة!) ، وملء مع اللون الأخضر و تعيين التعتيم في "طبقات علامة التبويب" إلى 60%.ثم حفظ وجعلها صورة الخلفية:

<p style="background: url(green.png);">any text</p>

يعمل بارد, بالطبع, ما عدا في جميل برنامج Internet Explorer 6.هناك أفضل الحلول المتاحة ، ولكن هنا سريع هاك:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}

هناك خدعة للحد من العلامات:استخدام الزائفة عنصر الخلفية ويمكنك تعيين التعتيم على ذلك دون أن يؤثر العنصر الرئيسي و الأطفال:

DEMO

الإخراج:

Background opacity with a pseudo element

كود ذات الصلة:

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}
/*** The following is just for demo styles  ***/

body {
  background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
  background-size: cover;
}
p {
  width: 50%;
  padding: 1em;
  margin: 10% auto;
  font-family: arial, serif;
  color: #000;
}
img {
  display: block;
  max-width: 90%;
  margin: .6em auto;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
  <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>

دعم المتصفح هو Internet Explorer 8 و في وقت لاحق.

أسهل طريقة هي استخدام خلفية شبه شفافة صورة PNG.

يمكنك استخدام جافا سكريبت أن تجعل من العمل في Internet Explorer 6 إذا كنت بحاجة إلى.

أنا استخدم الطريقة الموضحة في شفافة PNGs في برنامج Internet Explorer 6.

بخلاف ذلك ،

يمكنك وهمية باستخدام two side-by-side sibling elements - جعل واحد شبه شفافة, ثم absolutely position the other over the top?

وهذا الأسلوب يسمح لك لديك صورة في الخلفية وليس فقط بلون واحد، ويمكن استخدامها لديك الشفافية على سمات أخرى مثل الحدود. وهناك حاجة إلى صور PNG شفافة.

استخدم :before (أو :after) في CSS ومنحهم قيمة التعتيم على ترك عنصر في التعتيم الأصلي. وبالتالي يمكنك استخدام: قبل أن يجعل العنصر فو واعطائها خلفية شفافة (أو حدود) التي تريد وتحريكه وراء المحتوى الذي تريد أن تبقي مبهمة مع z-index.

مثال ( كمان ) (لاحظ أن DIV مع dad الدرجة هو فقط لتوفير بعض السياق وعلى النقيض من الألوان، هو في الواقع لا يحتاج هذا العنصر الإضافي، ويتم نقل مستطيل أحمر قليلا إلى الأسفل وإلى الحق في مغادرة مرئية الخلفية وراء العنصر fancyBg): 

<div class="dad">
    <div class="fancyBg">
        Test text that should have solid text color lets see if we can manage it without extra elements
    </div>
</div>

ومع هذه CSS: 

.dad {
    background: lime; border: 1px double black; margin: 1ex 2ex;
    padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
    border: 1px dashed black; position: relative; color: white; font-weight: bold;
    z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
    position: absolute; background: red; opacity: .5;
    top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
    /*top: 0; right: 0; bottom: 0; left: 0;*/
    z-index: -1;
}

في هذه الحالة .fancyBg:before ديه خصائص CSS كنت تريد أن يكون مع الشفافية (خلفية حمراء في هذا المثال، ولكن يمكن أن يكون صورة أو الحدود). لقد وضعه كما المطلق لتحريكه وراء .fancyBg (قيم استخدام الصفر أو ما هو أكثر ملاءمة لاحتياجاتك).

والمشكلة هي أن النص في الواقع التعتيم الكامل في المثال الخاص بك. لديها التعتيم الكامل داخل علامة p، ولكن العلامة p هو مجرد شبه شفافة.

هل يمكن إضافة صورة PNG خلفية شبه شفافة بدلا من تحقيق ذلك في CSS، أو نص منفصل و div إلى 2 العناصر ونقل النص عبر مربع (على سبيل المثال، هامش سلبي).

وإلا فإنه لن يكون ممكنا.

وتحرير:

وتماما مثل كريس المذكورة: إذا كنت تستخدم ملف PNG مع الشفافية، لديك لاستخدام الحل جافا سكريبت والعمل على انجاحه في الإنترنت إكسبلورر غذر ...

تفترض

وتقريبا كل هذه الإجابات مصمم يريد خلفية بلون. إذا كان مصمم يريد فعلا صورة كخلفية الحل الحقيقي الوحيد في هذه اللحظة هو جافا سكريبت مثل المساعد مسج Transify <لأ href = "https://stackoverflow.com/questions/806000/css-semi-transparent-background-but -Not النص / 4015240 # 4015240 "> ذكر في مكان آخر .

ما يتعين علينا القيام به هو الانضمام إلى CSS العمل مناقشة مجموعة وجعلها تعطينا سمة خلفية التعتيم! يجب أن تعمل جنبا إلى جنب مع ميزة-خلفيات متعددة.

وهنا هو كيف أفعل هذا (أنه قد لا يكون الأمثل، لكنه يعمل):

وإنشاء div أن كنت تريد أن تكون شبه شفافة. إعطائها فئة / معرف. اتركه فارغا، وإغلاقه. إعطائها ارتفاع مجموعة والعرض (مثلا، 300 بكسل في 300 بكسل). إعطائها غموض 0.5 أو ما تريد، ولون الخلفية.

وبعد ذلك، مباشرة أدناه أن شعبة، وخلق آخر div مع فئة مختلفة / الهوية. إنشاء فقرة داخله، حيث يمكنك وضع النص الخاص بك. إعطاء موقف div: قريب، وأعلى: -295px (وهذا سلبي 295 بكسل). إعطائها فهرس z 2 لحسن التدبير، وتأكد من التعتيم هو 1. نمط الفقرة الخاصة بك كما تريد، ولكن تأكد من أبعاد أقل من ذلك من div أولا لذلك لا تجاوز.

وهذا كل شيء. هنا هو رمز: 

.trans {
  opacity: 0.5;
  height: 300px;
  width: 300px;
  background-color: orange;
}
.trans2 {
  opacity: 1;
  position: relative;
  top: -295px;
}
.trans2 p {
  width: 295px;
  color: black;
  font-weight: bold;
}
<body>
  <div class="trans">
  </div>
  <div class="trans2">
    <p>
      text text text
    </p>
  </div>
</body>

وهذا يعمل في سفاري الإصدار 2.x، وأنا لا أعرف عن إنترنت إكسبلورر.

وهنا هو البرنامج المساعد مسج من شأنها أن التعامل مع كل شيء بالنسبة لك، Transify (<م> <وأ href = "http://jorenrapini.com/blog/css/transify-a-jquery-plugin-to-easily-apply -transparency-التعتيم إلى وسيلة عناصر الخلفية "يختلط =" noreferrer "> Transify - البرنامج المساعد مسج لتطبيق بسهولة الشفافية / التعتيم على خلفية عنصر في )

وكنت اخوض في هذه المشكلة بين الحين والآخر، لذلك قررت أن أكتب شيئا من شأنه أن يجعل الحياة أسهل كثيرا. السيناريو هو أقل من 2 KB ويتطلب سوى 1 سطر من التعليمات البرمجية للحصول على عمل، وسيكون أيضا التعامل مع موحية غموض الخلفية إذا أردت.

الخلفية، ولكن ليس النص لديه بعض الأفكار. إما استخدام صورة شبه شفافة، أو تراكب عنصرا إضافيا.

وحين يعود، وأنا كتبت عن هذا في <لأ href = "http://www.unintentionallyblank.co.uk/2007/05/07/cross-browser-background-transparency-with-css/" يختلط = "noreferrer"> عبر متصفح الشفافية الخلفية مع CSS .

والغريب برنامج Internet Explorer 6 سوف تسمح لك لجعل الخلفية شفافة والإبقاء على النص على رأس مبهمة تماما. للمتصفحات الأخرى وبعد ذلك أقترح استخدام ملف PNG شفافة.

إذا كنت فوتوشوب الرجل ، يمكنك أيضا استخدام: 

 #some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }

أو: 

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}

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

.image{
   position: relative;
   background-color: cyan;
  opacity: 0.7;
}
سوف

و// أقل قيمة أكثر من أن تكون الشفافية وخام قيمة أقل ستكون الشفافية.

background-color:rgba(255,0,0,0.5); كما ذكر أعلاه هو أفضل الإجابة ببساطة.أقول استخدام CSS3, حتى في عام 2013 ، ليست بسيطة لأن مستوى الدعم من مختلف المتصفحات يتغير مع كل التكرار.

في حين background-color مدعومة من قبل جميع المتصفحات الرئيسية (لا CSS3) [1] ألفا الشفافية يمكن أن تكون صعبة ، خصوصا مع Internet Explorer قبل إلى الإصدار 9 و مع لون الحدود على سفاري قبل إلى الإصدار 5.1.[2]

استخدام شيء من هذا القبيل البوصلة أو ساس يمكن أن تساعد حقا الإنتاج عبر منصة التوافق.

[1] W3Schools:CSS لون الخلفية الملكية

[2] نورمان بلوق:دعم المتصفح قائمة CSS3 (تشرين الأول / أكتوبر 2012)

وCSS3 لديه حل سهل لمشكلتك. الاستخدام: 

background-color:rgba(0,255,0,0.5);

وهنا، رغبا لتقف على قيمة الأحمر والأخضر والأزرق وألفا. يتم الحصول على قيمة الخضراء بسبب 255 ويتم الحصول على نصف الشفافية من حيث القيمة 0.5 ألفا.

إذا كنت تستخدم أقل ، يمكنك استخدام fade(color, 30%).

ويمكنك حل هذا ل إنترنت إكسبلورر 8 التي كتبها (أ ب) باستخدام بناء الجملة التدرج. شكل اللون ARGB. إذا كنت تستخدم ساس المعالج يمكنك تحويل الألوان باستخدام دالة مضمنة "أي-عرافة-شارع ()". 

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";

ويمكنك استخدام CSS 3 : rgba(red, green, blue, alpha)، حيث alpha هو مستوى الشفافية انت تريد. ليست هناك حاجة لجافا سكريبت أو مسج.

وهنا مثال: 

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}

<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/ ؟

وهناك حل أسهل لوضع غطاء فوق صورة في نفس شعبة. انها ليست الحق في استخدام هذه الأداة. ولكن يعمل مثل السحر لجعل هذا تراكب باستخدام CSS.

استخدم الظل أقحم مثل هذا: 

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

وهذا كل شيء:)

يمكنك استخدام RGBA (red, green, blue, alpha) في CSS, شيء مثل هذا:

هكذا ببساطة تفعل شيئا مثل هذا في حالة الخاص بك:

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}
<اقتباس فقرة>   

ويمكنك أن تفعل مع rgba color code باستخدام المغلق مثل هذا المثال الذي رفع الصوت عاليا. 

.imgbox img{
  height:100px;
  width:200px;
  position:relative;
}
.overlay{
  background:rgba(74, 19, 61, 0.4);
  color:#fff;
  text-shadow:0px 2px 5px #000079;
  height:100px;
  width:300px;
  position:absolute;
  top:10%;
  left:25%;
  padding:25px;
}
<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
  <div class="overlay">
    <p>This is Simple Text.</p>
  </div>
</div>

وعادة ما تستخدم هذه الفئة لعملي. من الجيد جميلة. 

.transparent {
  filter: alpha(opacity=50); /* internet explorer */
  -khtml-opacity: 0.5;      /* khtml, old safari */
  -moz-opacity: 0.5;       /* mozilla, netscape */
  opacity: 0.5;           /* fx, safari, opera */
}

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

background-color: rgba(71,158,0,0.8);

استخدام لون الخلفية مع التعتيم

background-color:rgba(R,G,B,غموض);

enter image description here

ويمكنك استخدام RGB اللون مع التعتيم مثل هذا رمز اللون في RGB (63،245،0) وإضافة التعتيم مثل (63،245،0،0.5) وأيضا إضافة RGBA استبدال RGB. واستخدام لالتعتيم 

div{
  background:rgba(63,245,0,0.5);
  }

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top