Đặt lại độ mờ của phần tử con - Trình duyệt Maple (Ứng dụng Samsung TV)

Question

Tôi gặp sự cố khi tạo phần tử trong suốt có phần tử con. Sử dụng mã này phần tử con nhận giá trị độ mờ từ phần tử gốc.

Tôi cần đặt lại/đặt độ mờ của phần tử của con thành giá trị tùy ý. Trình duyệt tham chiếu là Maple Browser (for a Samsung TV Application).

.video-caption { 
     position: absolute; 
     top:50px; 
     width: 180px; 
     height: 55px; 
     background-color: #000; 
     -khtml-opacity:.40; 
     -moz-opacity:.40; 
     -ms-filter:"alpha(opacity=40)"; 
     filter:alpha(opacity=40); 
     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.4); /*just for testing*/ 
     opacity:.40; 
    } 
    .video-caption > p { 
     color: #fff !important; 
     font-size: 18px; 
     -khtml-opacity:1; 
     -moz-opacity:1; 
     -ms-filter:"alpha(opacity=100)"; 
     filter:alpha(opacity=100); 
     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1); 
     opacity:1; 
    } 

EDIT Markup

<div> <img id="videothb-1" src="https://xxxxx/splash.jpg"> <div class="video-caption"> <p>Description here</p> </div> </div> 

Answer 1

Vấn đề bạn có thể có (dựa trên xem xét selectors của bạn) là opacity ảnh hưởng đến tất cả các phần tử con của một phụ huynh:

div 
{ 
    background: #000; 
    opacity: .4; 
    padding: 20px; 
} 

p 
{ 
    background: #f00; 
    opacity: 1; 
}​ 

http://jsfiddle.net/Kyle_/TK8Lq/

Nhưng có một giải pháp! Sử dụng các giá trị nền rgba và bạn có thể có tính minh bạch bất cứ nơi nào bạn muốn :)

div 
{ 
    background: rgba(0, 0, 0, 0.4); 
    /*opacity: .4;*/ 
    padding: 20px; 
} 

p 
{ 
    background: rgba(255, 0, 0, 1); 
    /*opacity: 1;*/ 
}​ 

http://jsfiddle.net/Kyle_/TK8Lq/1/

---

Đối với văn bản, bạn chỉ có thể sử dụng mã rgba giống nhau, nhưng đặt thành thuộc tính màu sắc của CSS:

color: rgba(255, 255, 255, 1); 

Nhưng bạn phải sử dụng rgba để mọi thứ hoạt động, bạn phải xóa độ mờ cho tất cả các phần tử gốc.

http://jsfiddle.net/Kyle_/TK8Lq/2/

Answer 2

Giải pháp của Kyle hoạt động tốt.

Ngoài ra, nếu bạn không muốn đặt màu bằng RGBA, nhưng thay vì sử dụng HEX, có các giải pháp.

Với LESS cho dụ, bạn có thể sử dụng một mixin như:

.transparentBackgroundColorMixin(@alpha,@color) { 
    background-color: rgba(red(@color), green(@color), blue(@color), @alpha); 
} 

Và sử dụng nó như

.myClass { 
    .transparentBackgroundColorMixin(0.6,#FFFFFF); 
} 

Trên thực tế đây là những gì một built-in LESS function cũng cung cấp:

.myClass { 
    background-color: fade(#FFFFFF, 50%); 
} 

Xem How to convert HEX color to rgba with Less compiler?

Answer 3

Trả lời ở trên hoạt động tốt, tuy nhiên đối với những người thích sử dụng mã màu hex, bạn có thể đặt độ trong suốt bằng màu hex. EXP: # 472d20b9 - hai giá trị cuối cùng đặt độ mờ cho màu trong khi # 472d20 sẽ có cùng màu nhưng không có độ mờ. Lưu ý: Hoạt động tốt trong Chrome và Firefox, trong khi Edge và IE thì không. Đã không có cơ hội để thử nghiệm nó trong các trình duyệt khác.