Thanh trượt trong suốt Bootstrap

Question

Tôi đang cố gắng làm cho thanh điều hướng trong suốt giống như this. Nhưng tôi không thể làm cho nó hoạt động được. Tôi đã thêm rga (0,0,0,0,5) vào lớp navbar.

Answer 1

Tôi chỉ tìm ra. Đối với bất cứ ai cần điều này trong tương lai. Tôi đã thêm một ghi đè css đó là:

.navbar.transparent.navbar-inverse .navbar-inner { 
    background: rgba(0,0,0,0.4); 
} 

Và cú pháp html của tôi trông giống như:

<div class="navbar transparent navbar-inverse navbar-fixed-top"> 
    <nav class="navbar-inner"> 
    ... 
    </div> 
</div> 

Answer 2

Trước tiên tôi nghĩ rằng bạn có cú pháp sai cho RGB hoặc RGBA bạn đã viết

rga(0,0,0,0.5) 

Khi thực tế nó phải là

rgba(0,0,0,0.5); 

Hãy thực hiện việc này cho một ví dụ:

HTML

<div class="navbar"> 
    <ul> 
    <li>Menu1</li> 
    <li>Menu2</li> 
    </ul> 
</div> 

CSS

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

Tôi cũng xin đề nghị để có một màu dự phòng, chỉ trong trường hợp những người trình duyệt được sử dụng không hỗ trợ nó.

CSS dự phòng

.navbar { 
     background: rgb (0,0,0); 
    } 

Answer 3

Bạn thậm chí có thể sử dụng như thế này

.navbar-default { 
    background: none; 
} 

hoặc

.navbar { 
    background: none; 
} 

Bạn sẽ nhận được nền trong suốt.

Answer 4

Đối với thanh điều hướng trong suốt, nó khá dễ dàng. Trong tài liệu CSS, bạn có thể làm một trong ba điều.

A. Cách dễ dàng, nhưng bạn không học quá nhiều với phương pháp này. Bạn có nghĩa đen có thể gõ vào tài liệu CSS rằng nền của thanh điều hướng là trong suốt. Khá đơn giản:

.navbar 
{ 
    background-color: transparent; 
} 

B. Bạn gián tiếp có thể thiết lập các kênh alpha cho màu nền RGBA một cái gì đó ở giữa 0 và 1. R, G và B tọa độ kiểm soát màu đỏ, xanh lá cây, và màu xanh của pixel, tương ứng. Kênh A hoặc alpha, điều khiển độ trong suốt/độ trong suốt. Đối với R, G và B, bạn có thể nhập giá trị ở giữa 0 và 255. Tuy nhiên, đối với kênh alpha A, bạn phải nhập giá trị ở giữa 0 và 1. 1 nghĩa là nó hoàn toàn mờ đục (không trong suốt, còn gọi là hoàn toàn có thể nhìn thấy), và 0 có nghĩa là nó hoàn toàn trong suốt (vô hình). Việc đặt các giá trị khác nhau cho kênh alpha có thể giúp bạn quyết định mức độ trong suốt mà bạn muốn thanh điều hướng của mình. Rất hữu ích nếu bạn làm cho thanh điều hướng trở thành một đầu cố định và bạn có các màu nền khác nhau trên trang web của mình.

Ồ, và nói về màu sắc ... có nhiều hơn.

Bạn có thể tiến thêm một bước nữa.Nếu bạn muốn thanh điều hướng của mình trong suốt và có màu nhạt/trắng hơn, bạn có thể thực hiện các thao tác sau.

.navbar 
{ 
    /* White tint with 0.5 opacity. */ 
    background-color: rgba(255,255,255,0.5); 
    /* Notice how RGB of 255,255,255 is white. */ 
} 

Hoặc, nếu bạn muốn navbar của bạn phải minh bạch với một sẫm màu, đen màu, bạn có thể làm như sau:

.navbar 
{ 
    /* Example with a black tint and 0.5 opacity. */ 
    background-color: rgba(0,0,0,0.5); 
    /* RGB of 0,0,0 is black. */ 
} 

Bây giờ, nếu bạn muốn cho navbar trong suốt của bạn, ví dụ , một màu xanh lá cây, rối tung xung quanh với giá trị màu xanh lá cây G! Đối với màu đỏ, rối tung xung quanh với giá trị R. Đối với màu xanh, rối tung xung quanh với giá trị B. Đối với màu lục lục của # 008f00 hoặc (0,143,0) trong RGB, nó sẽ giống như sau:

.navbar 
{ 
    /* Green tint of RGB 0,143,0, and with 0.5 opacity. */ 
    background-color: rgba(0,143,0,0.5); 
} 

Hy vọng điều này sẽ hữu ích!