[css] ถามเกี่ยวกับ opacity ว่า ถ้าต้องการแบบนี้ต้องทำยังไง?

[wch2013]

<div style="opacity=0.5">
  กขคงฟหกด่าสว...
  <img src="abc.jpg"/>
  <div>abcdefg...</div>
</div>

จากโค้ดด้านบน ถ้ากำหนด opcity ของ tag div ด้านนอกสุด tag img กับ tag div ด้านในจะโปร่งใสตามไปด้วย

ถ้าเราไม่ต้องการให้  tag img กับ tag div ด้านในโปร่งใสตาม ต้องกำหนดค่ายังไงครับ

ขอบคุณครับ

[Positron]

ใช้ rgba ใน background แทนครับ แต่จะมีผลกับบราวเซอร์ใหม่ๆที่รองรับ css3 เท่านั้น

ตัวอย่างใช้งานเช่น

background: rgba(255, 255, 255, 0.5)  ;    // rgba(red,gren,blue,alpha) = หลักสุดท้ายคือความโปร่งแสง 0 - 1 ส่วนตามตัวแรกก็รหัส rgb ทั่วไปที่ใช้ๆกัน
และถ้าต้องการให้บราวเซอร์ที่ไม่รองรับ rbga แสดงผลเป็นสีอื่นก็ให้สั่ง background เป้นสีอื่นก่อนจะสั่ง rbga เช่น


<div style="background-color:#FFF;background-color:rgba(255, 255, 255, 0.5)">
  กขคงฟหกด่าสว...
  <img src="abc.jpg"/>
  <div>abcdefg...</div>
</div>

[Raffer7]

opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */


ลองดูครับ

[mean]

ผมมีเว็บดีดี เว็บนี้ครับ
http://prefixr.com/

จะต่างกันตรงที่ opacity จะแสดงผลใน browser ที่ใช้ attribute ที่ต่างกันครับ

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
opacity:0.4;

[nom_loso]

opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */


ลองดูครับ

[goldxp]

<div style="position:relative;width:200px;height:200px;">
      <div style="position:absolute;width:200px;height:200px;left:0px;top:0px;background:red;opacity:0.2;z-index:0;"></div>
      <div style="position:absolute;width:200px;height:200px;left:0px;top:0px;color:blue;z-index:1;">TEXT</div>
</div>

ใช้ layer background ชิ้นนึงและ layer ข้อความอีกชิ้นนึงซ้อนกันครับ

[Pink.in.th]

ผมมีเว็บดีดี เว็บนี้ครับ
http://prefixr.com/

จะต่างกันตรงที่ opacity จะแสดงผลใน browser ที่ใช้ attribute ที่ต่างกันครับ

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
opacity:0.4;

น่าจะประมาณนี้ครับผมแต่ล่ะ  browser  ใช้ต่างกัน   

[bluepotion]

สร้าง class ขึ้นมาตัวนึง เช่น

.noopacity {
opacity:1;
filter:alpha(opacity=100);
}

แล้วใน div ข้างใน กับ img ก็ใส่ class="noopacity" เป็นแบบนี้

<div style="opacity=0.5">
 กขคงฟหกด่าสว...
 <img class="noopacity" src="abc.jpg"/>
 <div class="noopacity">abcdefg...</div>
</div>

[fender69]

http://jsfiddle.net/aFdts/

ผมลองเขียนไว้ที่ jsfiddle นะครับ
ประมาณนี้หละครับผม
ส่วน opacity แต่ละ browser จะไม่เหมือนกัน ยังไง google น่าจะช่วยได้นะครับ

หรืองงตรงไหนก็สอบถามได้ครับ ผม