วิธีทำให้ div พื้นหลังโปร่งใสใน CSS


191

ฉันไม่ได้ใช้ CSS3 ดังนั้นฉันไม่สามารถใช้opacityหรือfilterคุณสมบัติ โดยไม่ใช้แอตทริบิวต์เหล่านี้ฉันจะทำให้background-colora โปร่งใสได้divอย่างไร ควรเป็นตัวอย่างกล่องข้อความในลิงค์นี้ ที่นี่สีพื้นหลังของกล่องข้อความมีความโปร่งใส ฉันต้องการทำสิ่งเดียวกัน แต่ไม่ใช้คุณลักษณะที่กล่าวถึงข้างต้น


3
ทั้งopacityมิได้filterมี CSS 3 คุณลักษณะ ทำไมคุณถึงคิดว่าคุณไม่สามารถใช้มันได้?
Pekka

ฉันไม่รู้ว่าใน Eclipse Juno ของฉันทั้งสองคุณสมบัตินั้นไม่แสดงและตาม W3School: หมายเหตุ: คุณสมบัติความทึบแสง CSS เป็นส่วนหนึ่งของการแนะนำ W3C CSS3 ดูที่นี่
Mistu4u

และ eclipse ของฉันไม่รองรับ CSS3 !! :(
Mistu4u

1
ฉันว่าคุณสามารถเพิกเฉยต่อข้อความเหล่านั้นได้ คุณลักษณะบางอย่างอยู่นอกข้อกำหนด แต่ก็ยังใช้งานได้ในโลกแห่งความเป็นจริง การรวมกันของopacity, filterและบางส่วนคุณสมบัติอื่น ๆ ตามที่แสดงไว้ที่นี่: css-tricks.com/css-transparency-settings-for-all-broswersจะครอบคลุมสวยมากทุกเบราว์เซอร์ที่มี
Pekka

คำตอบ:


140

ความทึบช่วยให้คุณโปร่งแสงหรือโปร่งใส ดูตัวอย่างซอนี่

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Good browsers */

หมายเหตุ: สิ่งเหล่านี้ไม่ใช่คุณสมบัติ CSS3

ดูhttp://css-tricks.com/snippets/css/cross-browser-opacity/


1
"ดังนั้นผมจึงไม่สามารถใช้ความทึบแสงหรือตัวกรองแอตทริบิวต์"
Jerska

4
@ Jerska ที่เป็นหลักฐานที่ต้องการสอบปากคำ เหตุผลเดียวที่เขาจะไม่ใช้คุณลักษณะเหล่านั้นน่าจะเป็นที่ IDE ของเขาจะบ่นเกี่ยวกับพวกเขา
Pekka

มีวิธีอื่นอีกไหมที่จะประสบความสำเร็จเช่นนั้น?
Mistu4u

@Subir ถ้าคุณต้องการวิธีอื่นดูคำตอบของ Jerska แต่ดังที่กล่าวไปแล้วดูเหมือนว่าเป็นคำถามที่น่าสงสัยว่าทำไมคุณต้องการหลีกเลี่ยงopacityตั้งแต่แรก
Pekka

11
โปสเตอร์ต้องการพื้นหลังทึบแสงไม่ใช่องค์ประกอบทึบแสง ข้อความในองค์ประกอบจะทึบแสงโดยใช้วิธีทึบแสง คำตอบนี้ไม่สมบูรณ์พอที่จะให้ การใช้ rgba กับ png ทางเลือกจะดีกว่ามาก
René

352

ปัญหาopacityคือมันจะส่งผลกระทบต่อเนื้อหาเมื่อคุณไม่ต้องการให้เกิดขึ้นบ่อยครั้ง

หากคุณต้องการให้องค์ประกอบของคุณโปร่งใสมันเป็นเรื่องง่ายเหมือน:

background-color: transparent;

แต่ถ้าคุณต้องการให้เป็นสีคุณสามารถใช้:

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

หรือกำหนดภาพพื้นหลัง ( 1pxจาก1px) alphaบันทึกไว้ด้วยขวา
(หากต้องการทำเช่นนั้นการใช้งานGimp, Paint.Netหรือซอฟต์แวร์ภาพอื่น ๆ ที่ช่วยให้คุณทำอย่างนั้น.
เพียงแค่สร้างภาพใหม่ให้ลบพื้นหลังและใส่สีกึ่งโปร่งใสในนั้นแล้วบันทึกไว้ใน PNG.)

ตามที่กล่าวโดยRenéสิ่งที่ดีที่สุดที่จะทำจะผสมทั้งสองกับrgbaครั้งแรกและ1pxโดย1pxภาพที่เป็นทางเลือกหากเบราว์เซอร์ไม่สนับสนุนอัลฟา:

background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);

ดูเพิ่มเติม : http://www.w3schools.com/cssref/css_colors_legal.asp

การสาธิต : JSFiddle ของฉัน


3
พิมพ์ยังเป็นความคิดเห็นที่คำตอบอื่น ๆ สิ่งที่ดีที่สุดคือการใช้การระบายสี rgba และ png ที่อธิบายไว้ในคำตอบนี้เป็นทางเลือก
René

2
ความชั่วร้ายในความเรียบง่ายของการใช้ 'โปร่งใส' บนแอตทริบิวต์พื้นหลังสี รุ่งโรจน์เมกะ!
จันทร์ที่

12

transparentเป็นค่าเริ่มต้นสำหรับสีพื้นหลัง

http://www.w3schools.com/cssref/pr_background-color.asp


ใช่. จากข้อมูลจำเพาะของ MDN เกี่ยวกับ backgorund-colorค่าเริ่มต้นของ backgorund-color นั้นจะโปร่งใสและไม่ใช่คุณสมบัติที่สืบทอดมา ดังนั้นค่าเริ่มต้นจึงโปร่งใส
Dan Cron

4

จากhttps://developer.mozilla.org/en-US/docs/Web/CSS/background-color

วิธีตั้งค่าสีพื้นหลัง:

/* Hexadecimal value with color and 100% transparency*/
background-color: #11ffee00;  /* Fully transparent */

/* Special keyword values */
background-color: transparent;

/* HSL value with color and 100% transparency*/
background-color: hsla(50, 33%, 25%, 1.00);  /* 100% transparent */

/* RGB value with color and 100% transparency*/
background-color: rgba(117, 190, 218, 1.0);  /* 100% transparent */

2

อาจจะมีการพูดคุยกันช้าไปหน่อย แต่ก็มีบางคนที่จะสะดุดกับโพสต์นี้เหมือนที่ฉันทำ ฉันพบคำตอบที่ฉันกำลังมองหาและคิดว่าฉันโพสต์ของฉันเองใช้มัน JSfiddle ต่อไปนี้มีวิธีเลเยอร์. PNG ด้วยความโปร่งใส Jerska พูดถึงคุณสมบัติความโปร่งใสสำหรับ CSS ของ div เป็นวิธีแก้ปัญหา: http://jsfiddle.net/jyef3fqr/

HTML:

   <button id="toggle-box">toggle</button>
   <div id="box" style="display:none;" ><img src="x"></div>
   <button id="toggle-box2">toggle</button>
   <div id="box2" style="display:none;"><img src="xx"></div>
   <button id="toggle-box3">toggle</button>
   <div id="box3" style="display:none;" ><img src="xxx"></div>

CSS:

#box {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:1;
}
#box2 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
      #box3 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
 body {background-color:#c0c0c0; }

JS:

$('#toggle-box').click().toggle(function() {
$('#box').animate({ width: 'show' });
}, function() {
$('#box').animate({ width: 'hide' });
});

$('#toggle-box2').click().toggle(function() {
$('#box2').animate({ width: 'show' });
}, function() {
$('#box2').animate({ width: 'hide' });
});
$('#toggle-box3').click().toggle(function() {
$('#box3').animate({ width: 'show' });
 }, function() {
$('#box3').animate({ width: 'hide' });
});

และแรงบันดาลใจดั้งเดิมของฉัน: http://jsfiddle.net/5g1zwLe3/ ฉันยังใช้ paint.net เพื่อสร้าง PNG ที่โปร่งใสหรือแทนที่จะเป็น PNG ด้วย BG ที่โปร่งใส


0
    /*Fully Opaque*/
    .class-name {
      opacity:1.0;
    }

    /*Translucent*/
    .class-name {
      opacity:0.5;
    }

    /*Transparent*/
    .class-name {
      opacity:0;
    }

    /*or you can use a transparent rgba value like this*/
    .class-name{
      background-color: rgba(255, 242, 0, 0.7);
      }

    /*Note - Opacity value can be anything between 0 to 1;
    Eg(0.1,0.8)etc */

โปรดให้คำอธิบายสำหรับคำตอบของคุณและหลีกเลี่ยงการโพสต์รหัสคำตอบเท่านั้น
Saeed Zhiany
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.