ฉันจะสร้างพื้นหลังแบบกึ่งโปร่งใสได้อย่างไร

ฉันต้องทำให้พื้นหลังสีขาวโปร่งใส 50% โดยไม่กระทบสิ่งอื่นใด ฉันต้องทำอย่างไร?

การใช้rgba():

.transparent {
  background-color: rgba(255,255,255,0.5);
}

สิ่งนี้จะทำให้คุณมีความทึบ 50% ในขณะที่เนื้อหาของกล่องจะยังคงมีความทึบ 100%

หากคุณใช้opacity:0.5เนื้อหาจะจางหายไปเช่นเดียวกับพื้นหลัง ดังนั้นอย่าใช้มัน

ใช้งานได้ แต่ลูกทุกองค์ประกอบในคลาสนี้จะโปร่งใสโดยไม่มีวิธีการป้องกันใด ๆ

.css-class-name {
    opacity:0.8;
}

ถ้าคุณต้องการทำให้พื้นหลังโปร่งใสเป็นสีเทากรุณาลอง:

   .transparent{
       background:rgba(1,1,1,0.5);
   }

ดีแล้วที่รู้

เว็บเบราว์เซอร์บางแห่งมีปัญหาในการแสดงข้อความด้วยเงาที่ด้านบนของพื้นหลังโปร่งใส จากนั้นคุณสามารถใช้ภาพ PNG กึ่งโปร่งใส 1x1 เป็นพื้นหลัง

บันทึก

จำไว้ว่า IE6 ไม่รองรับไฟล์ PNG

อย่าใช้ PNG แบบกึ่งโปร่งใส 1x1 ปรับขนาด PNG ได้สูงสุด 10 x 10, 100x100 และอื่น ๆ ตามที่คุณต้องการ (ฉันใช้ PNG ขนาด 200x200 และมีน้ำหนักเพียง 0.25 kb ดังนั้นจึงไม่ต้องกังวลเรื่องขนาดไฟล์ที่นี่)

หลังจากเยี่ยมชมโพสต์นี้ฉันสร้างหน้าเว็บของฉันด้วย 3, 1x1 PNGs ด้วยความโปร่งใสที่แตกต่างกัน

Dreamweaver CS5 เป็นรถถัง ฉันมีแฟลชย้อนกลับไปที่ DOS !!! เห็นได้ชัดว่าเมื่อใดก็ตามที่ฉันพยายามเลื่อนแทรกข้อความโดยทั่วไปแล้วทำอะไรก็ได้ DW กำลังพยายามโหลดพื้นที่กึ่งโปร่งใสขนาด 1x1 พิกเซลในแต่ละครั้ง ... YIKES!

ฝ่ายสนับสนุนด้านเทคนิคของ Adobe ไม่ทราบว่าปัญหาคืออะไร แต่บอกให้ฉันสร้างไฟล์ขึ้นใหม่ (มันทำงานบนระบบของพวกเขาโดยบังเอิญ) มันก็ต่อเมื่อฉันโหลด PNG โปร่งใสแรกลงในไฟล์ css ที่ doc นกพิราบลึกอีกครั้ง

จากนั้นฉันก็พบโพสต์ในเว็บไซต์ช่วยเหลืออื่นเกี่ยวกับ PNGs ที่ขัดข้อง Dreamweaver เพิ่มขนาด PNG ของคุณ ไม่มีข้อเสียในการทำเช่นนั้น

แม้ว่าจะลงวันที่แล้วไม่มีคำตอบเดียวสำหรับหัวข้อนี้ที่สามารถใช้ได้ในระดับสากล การใช้ rgba เพื่อสร้างมาสก์สีโปร่งใส - ซึ่งไม่ได้อธิบายอย่างชัดเจนว่าทำอย่างไรกับภาพพื้นหลัง

โซลูชันของฉันใช้ได้กับภาพพื้นหลังหรือพื้นหลังสี

#parent {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 19px;
    text-transform: uppercase;
    border-radius: 50%;
    margin: 20px auto;
    width: 125px;
    height: 125px;
    background-color: #476172;
    background-image: url('https://unsplash.it/200/300/?random');
    line-height: 29px;
    text-align:center;
}

#content {
    color: white;
    height: 125px !important;
    width: 125px !important;
    display: table-cell;
    border-radius: 50%;
    vertical-align: middle;
    background: rgba(0,0,0, .3);
}

<h1 id="parent"><a href="" id="content" title="content" rel="home">Example</a></h1>

div.main{
     width:100%;
     height:550px;
     background: url('https://images.unsplash.com/photo-1503135935062-
     b7d1f5a0690f?ixlib=rb-enter code here0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cf4d0c234ecaecd14f51a2343cc89b6c&dpr=1&auto=format&fit=crop&w=376&h=564&q=60&cs=tinysrgb') no-repeat;
     background-position:center;
     background-size:cover 
}
 div.main>div{
     width:100px;
     height:320px;
     background:transparent;
     background-attachment:fixed;
     border-top:25px solid orange;
     border-left:120px solid orange;
     border-bottom:25px solid orange;
     border-right:10px solid orange;
     margin-left:150px 
}

ลองสิ่งนี้:

.transparent
{ 
  opacity:.50;
  -moz-opacity:.50; 
  filter:alpha(opacity=50); 
}