CSS: nền chỉ có độ mờ, không phải văn bản bên trong

Question

Tôi có hộp biểu mẫu đăng ký này và tôi thực sự thích cách nền mờ, trong suốt với 25% (85), nhưng sau đó tôi nhận thấy rằng văn bản và các phần tử biểu mẫu cũng bị làm giảm tối đa và như vậy, vì vậy tôi tự hỏi làm thế nào để làm điều này chỉ với biên giới và nền và không phải với những thứ bên trong hộp?

#regForm { 
z-index:11; 
position: absolute; 
top: 120px; 
left: 500px; 
background: #000; 
color: #FFF; 
width: 500px; 
height: 240px; 
border: 6px solid #18110c; 
text-align: center; 
margin: 40px; 
padding: 1px; 
    opacity: 0.85; 
    -moz-opacity: 0.85; /* older Gecko-based browsers */ 
    filter:alpha(opacity=85); /* For IE6&7 */ 

} 

Answer 1

Cách dễ dàng là chuyển văn bản thành div riêng biệt, like so. Về cơ bản bạn áp dụng các opacity đến một div riêng biệt và vị trí của các văn bản trên đầu ...

<div id="parent"> 
    <div id="opacity"></div> 
    <div id="child">text</div> 
</div> 

div#parent { position:relative; width:200px; height:200px; } 
div#child { position:absolute; width:200px; height:200px; z-index:2; } 
div#opacity { position:absolute; width:200px; height:200px; z-index:1; } 

Các tuyến đường khác sẽ rgba. Đừng quên có một thuộc tính css riêng biệt để nạp IE vì nó không hỗ trợ thuộc tính rgba. Bạn cũng có thể nuôi một png trong suốt.

#regForm { 
    background: rgb(200, 54, 54); /* fallback color */ 
    background: rgba(200, 54, 54, 0.5); 
} 

Và đối với IE ...

<!--[if IE]> 

    <style type="text/css"> 

    .color-block { 
     background:transparent; 
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050); 
     zoom: 1; 
    } 

    </style> 

<![endif]--> 

Cá nhân tôi muốn đi với các tùy chọn đầu tiên bởi vì nó ít rắc rối.

Answer 2

Không thể hoàn thành: Mọi phần tử con sẽ thừa hưởng độ mờ của cha mẹ.

Trường hợp của bạn thật dễ dàng - chỉ cần sử dụng hai số div s. Có hình nền trong một và áp dụng độ mờ đục và đặt nội dung vào hình ảnh thứ hai. Sử dụng position: absolute và z-index để đặt chúng lên trên nhau.

Answer 3

RGBA là cách để thực hiện nếu bạn chỉ đang tìm giải pháp css. Có thể sử dụng màu đồng nhất làm dự phòng cho các trình duyệt cũ không thể sử dụng RGBA.

.stuff { 
    background-color: rgb(55, 55, 55); 
    background-color: rgba(55, 55, 55, 0.5); 
} 

Bạn cũng có thể dự phòng trên một hình ảnh:

.stuff2 { 
    background: transparent url(background.png); 
    background: rgba(0, 0, 0, 0.5) none; 
} 

Dưới đây là tất cả những gì bạn cần cho việc này để làm việc trong tất cả các phiên bản ác của IE: http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer

Answer 4

Tốt nhất có lẽ sẽ sử dụng PNG bán trong suốt cho nền của bạn hoặc để đặt màu cho nền và đường viền bằng RGBa. PNGs sẽ hoạt động tốt nếu bạn không nhớ đánh dấu thêm bạn sẽ cần phải tạo một vùng chứa có chiều rộng linh hoạt, nhưng chúng cũng không được hỗ trợ trong IE6 (nếu đó là một mối quan tâm).

RGBa được triển khai rộng rãi hơn trên các trình duyệt, nhưng nếu độ trong suốt chỉ được sử dụng cho sự tinh tế trực quan thì đó là một nơi tốt để sử dụng một số cải tiến nâng cao.

Đối RGBA, bạn sẽ cần phải thêm một dòng thêm như một dự phòng:

#regForm { 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.5); 
    border-color: rgb(24, 17, 12); 
    border-color: rgba(24, 17, 12); 
} 

Bất kỳ trình duyệt mà không nhận tờ khai RGBA đơn giản sẽ sử dụng RGB đồng bằng.

CSS-Tricks article on RGBa across browsers

Answer 5

Không cần phải làm tất cả những thứ như thế không cần phải áp dụng các vị trí trên một div sau đó mờ, đây là cách rất đơn giản để đạt được nó, background: rgba(0, 0, 0, 0.6);

duy nhất bạn phải sử dụng màu nền với giá trị độ mờ.