สีพื้นหลัง CSS แบบโปร่งใส

ฉันต้องการทำให้พื้นหลังของเมนูรายการหายไปโดยใช้ความทึบโดยไม่ส่งผลต่อฟอนต์ เป็นไปได้ด้วย CSS3?

ตอนนี้คุณสามารถใช้rgbaในคุณสมบัติ CSS ดังนี้:

.class {
    background: rgba(0,0,0,0.5);
}

0.5 คือความโปร่งใสเปลี่ยนค่าตามการออกแบบของคุณ

การสาธิตสด http://jsfiddle.net/EeAaB/

ข้อมูลเพิ่มเติม http://css-tricks.com/rgba-browser-support/

โปรดคำนึงถึงสามตัวเลือกเหล่านี้ (คุณต้องการ # 3):

1) องค์ประกอบทั้งหมดโปร่งใส:

visibility: hidden;

2) องค์ประกอบทั้งหมดค่อนข้างโปร่งใส:

opacity: 0.0 - 1.0;

3) พื้นหลังขององค์ประกอบโปร่งใสเท่านั้น:

background-color: transparent;

ใช่เป็นไปได้ เพียงใช้rgba-syntaxสำหรับสีพื้นหลังของคุณ

.menue{
  background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
}

นี่คือคลาสตัวอย่างที่ใช้ CSS ชื่อสี:

.semi-transparent {
  background: yellow;
  opacity: 0.25;
}

เพิ่มพื้นหลังที่ทึบแสง 25% (สี) และ 75% โปร่งใส

CAVEAT น่าเสียดายที่ความทึบจะส่งผลต่อองค์ประกอบทั้งหมดที่แนบมา
ดังนั้นหากคุณมีข้อความในองค์ประกอบนั้นก็จะตั้งค่าข้อความให้มีความทึบ 25% เช่นกัน :-(

วิธีที่จะผ่านพ้นไปได้คือการใช้rgbaหรือhslaวิธีการแสดงความโปร่งใสซึ่งเป็นส่วนหนึ่งของ "สี" พื้นหลังที่คุณต้องการ สิ่งนี้ช่วยให้คุณระบุความโปร่งใสของพื้นหลังโดยไม่ขึ้นกับความโปร่งใสของรายการอื่น ๆ ในองค์ประกอบของคุณ

มี 3 วิธีในการตั้งค่าพื้นหลังสีน้ำเงินที่ความโปร่งใส 75% โดยไม่ส่งผลกระทบต่อองค์ประกอบอื่น ๆ :

• background: rgba(0%, 0%, 100%, 0.75)
• background: rgba(0, 0, 255, 0.75)
• background: hsla(240, 100%, 50%, 0.75)

ในกรณีนี้background-color:rgba(0,0,0,0.5);เป็นวิธีที่ดีที่สุด ตัวอย่างเช่น:background-color:rgba(0,0,0,opacity option);

เพื่อให้บรรลุคุณต้องแก้ไขbackground-colorองค์ประกอบ

วิธีสร้างสีโปร่งใส (กึ่ง):

• ชื่อสี CSS transparentจะสร้างสีที่โปร่งใสอย่างสมบูรณ์

  การใช้งาน:

    .transparent{
      background-color: transparent;
    }
  

• การใช้rgbaหรือhslaฟังก์ชั่นสีที่ช่วยให้คุณสามารถเพิ่มช่องอัลฟา (ความทึบ) ให้กับฟังก์ชันrgbและ hslค่าอัลฟาอยู่ในช่วง 0 - 1

  การใช้งาน:

    .semi-transparent-yellow{
      background-color: rgba(255, 255, 0, 0.5);
    }
    .transparent{
      background-color:  hsla(0, 0%, 0%, 0);
    }
  

• นอกจากโซลูชันที่กล่าวไปแล้วคุณยังสามารถใช้รูปแบบ HEX ที่มีค่าอัลฟา ( #RRGGBBAAหรือ#RGBAสัญกรณ์ )

  ค่อนข้างใหม่ (อยู่ใน CSS Color Module Level 4) แต่ได้นำไปใช้แล้วในเบราว์เซอร์ขนาดใหญ่ (ขออภัยไม่มี IE)

  สิ่งนี้แตกต่างจากโซลูชันอื่นเนื่องจากถือว่าช่องอัลฟา (ความทึบ) เป็นค่าเลขฐานสิบหกเช่นกันทำให้มีค่าตั้งแต่ 0 - 255 ( FF)

  การใช้งาน:

    .semi-transparent-yellow{
      background-color: #FFFF0080;
    }
    .transparent{
      background-color: #0000;
    }
  

คุณสามารถทดลองใช้งานได้เช่นกัน:

• transparent:

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: transparent;
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `transparent`
</div>

• rgba():

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: rgba(0, 255, 0, 0.3);
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `rgba()`
</div>

• #RRGGBBAA:

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: #FF000060
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `#RRGGBBAA`
</div>

ลองสิ่งนี้:

opacity:0;

สำหรับ IE8 และรุ่นก่อนหน้า

filter:Alpha(opacity=0); 

Opacity Demo จาก W3Schools

ใช่คุณสามารถเขียนข้อความธรรมดาเป็นไฟล์

.someDive{
    background:transparent 
}