Làm thế nào để giữ cho opacity văn bản 100 khi container mẹ của nó là có độ mờ đục của 50

Question

Tôi có một div danh sách trong đó có một opacity thiết lập để 50 và bên trong div này tôi muốn hiển thị một số văn bản với opacity 100,

Đây là những gì Ý tôi là:

<div id="outer"> 
    <div id="inner"> 
    Text 
    </div> 
</div> 

CSS sẽ là:

#outer { 
    opacity: 0.5; 
} 

#inner { 
    opacity: 1.0; 
} 

tôi cố gắng đó, nhưng nó không hoạt động.

xin vui lòng giúp

Trân

Answer 1

Có hai cách để làm điều này: Một là chỉ cần thiết lập background-color của các container để một màu trong suốt, với rgba(r,g,b,.5) - Tuy nhiên, đây là CSS3 và chỉ được hỗ trợ trong các trình duyệt mới hơn.

Cách khác là thả một div vị trí hoàn toàn bên trong vùng chứa, với độ mờ là 0,5.

<div class="backgroundOpacity"> 
    My Epic Content 
</div> 
<br/> 
<div class="backgroundDiv"> 
    <div id="background"> </div> 
    My Other Epic Content 
</div> 
.backgroundOpacity { 
background-color:rgba(0,0,0,.5); 
} 
.backgroundDiv { 
    position:relative; 
} 
#background { 
position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-color:#000; 
    opacity: .5; 
} 

http://jsfiddle.net/thomas4g/vVt8D/1/

Answer 2

Một giải pháp đơn giản và tương thích là để loại bỏ tất cả các bạn opacity, và sử dụng:

#outer { 
    background: url(50%-transparent-white.png); 
    background: rgba(255,255,255,0.5) 
} 

• trình duyệt có hỗ trợ rgba sẽ sử dụng background khai thứ hai với rgba.
• Trình duyệt that do not sẽ bỏ qua tuyên bố thứ hai background và sử dụng .png.

_{Các .png sẽ không làm việc trong IE6, nhưng đó là unlikely là một vấn đề . Nếu có, it can be resolved.}

---

Tuy nhiên, phương pháp khác được trình bày chi tiết ở đây:

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Answer 3

Bạn có thể thiết lập div bên ngoài của bạn như thế này

background-color: rgba(0, 0, 0, 0.8); opacity: inherit;

Answer 4

background-color: rgba(0,0,0,0.5); 

Answer 5

này có thể được thực hiện bởi một lừa và nó là dễ dàng như vậy, đây là h ow:

bạn muốn lấy văn bản bên ngoài div trong suốt và đó là bằng cách thực hiện một div khác làm vị trí: tương đối;