Làm thế nào để tôi thực hiện một nền bán trong suốt?

Tôi cần phải làm nền trắng trong suốt 50% mà không ảnh hưởng gì khác. Tôi phải làm nó như thế nào?

Sử dụng rgba():

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

Điều này sẽ cung cấp cho bạn độ mờ 50% trong khi nội dung của hộp sẽ tiếp tục có độ mờ 100%.

Nếu bạn sử dụng opacity:0.5, nội dung sẽ bị mờ cũng như nền. Do đó không sử dụng nó.

Điều này hoạt động, nhưng tất cả các phần tử con của lớp này cũng sẽ trở nên trong suốt, không có cách nào ngăn chặn điều đó.

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

Nếu bạn muốn làm cho nền trong suốt có màu xám, vui lòng thử:

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

Điều tốt để biết

Một số trình duyệt web gặp khó khăn khi kết xuất văn bản với bóng trên nền trong suốt. Sau đó, bạn có thể sử dụng hình ảnh PNG 1x1 bán trong suốt làm nền.

Ghi chú

Hãy nhớ rằng IE6 không hỗ trợ các tệp PNG.

KHÔNG sử dụng PNG bán trong suốt 1x1. Kích thước PNG lên tới 10 x 10, 100x100, v.v ... Bất cứ điều gì có ý nghĩa trên trang của bạn. (Tôi đã sử dụng PNG 200x200 và nó chỉ 0,25 kb, vì vậy không có mối quan tâm thực sự nào về kích thước tệp ở đây.)

Sau khi truy cập bài đăng này, tôi đã tạo trang web của mình với 3, 1x1 PNG với độ trong suốt khác nhau.

Dreamweaver CS5 đang tăng tốc. Tôi đã có flash back cho DOS !!! Rõ ràng bất cứ khi nào tôi cố gắng cuộn, chèn văn bản, về cơ bản là làm bất cứ điều gì, DW đã cố gắng tải lại các vùng bán trong suốt 1x1 pixel tại một thời điểm ... YIKES!

Bộ phận hỗ trợ kỹ thuật của Adobe thậm chí không biết vấn đề là gì, nhưng đã bảo tôi xây dựng lại tệp (nó hoạt động trên hệ thống của họ, tình cờ). Chỉ đến khi tôi tải PNG trong suốt đầu tiên vào tệp css thì tài liệu mới quay lại sâu.

Sau đó, tôi tìm thấy một bài đăng trên một trang web trợ giúp khác về các PNG bị rơi Dreamweaver. Kích thước PNG của bạn lên; không có nhược điểm để làm như vậy.

Mặc dù ngày, không một câu trả lời trên chủ đề này có thể được sử dụng phổ biến. Sử dụng rgba để tạo mặt nạ màu trong suốt - điều đó không giải thích chính xác cách thực hiện với hình nền.

Giải pháp của tôi hoạt động cho hình ảnh nền hoặc màu nền.

#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 
}

Thử cái này:

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