Đảo ngược màu phông chữ CSS tùy thuộc vào màu nền

Question

Có thuộc tính CSS để đảo ngược font-color tùy thuộc vào background-color như hình này không?

Answer 1

Có một thuộc tính CSS gọi mix-blend-mode, nhưng nó không được hỗ trợ bởi trình duyệt IE. Tôi khuyên bạn nên sử dụng pseudo elements. Nếu bạn muốn hỗ trợ IE6 và IE7, bạn cũng có thể sử dụng two DIVs thay vì các phần tử giả.

.inverted-bar { 
 
    position: relative; 
 
} 
 

 
.inverted-bar:before, 
 
.inverted-bar:after { 
 
    padding: 10px 0; 
 
    text-indent: 10px; 
 
    position: absolute; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    content: attr(data-content); 
 
} 
 

 
.inverted-bar:before { 
 
    background-color: aqua; 
 
    color: red; 
 
    width: 100%; 
 
} 
 

 
.inverted-bar:after { 
 
    background-color: red; 
 
    color: aqua; 
 
    width: 20%; 
 
}

<div class="inverted-bar" data-content="Lorem ipsum dolor sit amet"></div>

Answer 2

Vâng, bây giờ có. Sử dụng mix-blend-mode, điều này có thể được thực hiện bằng CSS.

http://jsfiddle.net/1uubdtz6/

div { 
 
    position:absolute; 
 
    height:200px 
 
} 
 

 
/* A white bottom layer */ 
 
#whitebg { 
 
    background: white; 
 
    width:400px; 
 
    z-index:1 
 
} 
 

 
/* A black layer on top of the white bottom layer */ 
 
#blackbg { 
 
    background: black; 
 
    width:100px; 
 
    z-index:2 
 
} 
 

 
/* Some white text on top with blend-mode set to 'difference' */ 
 
span { 
 
    position:absolute; 
 
    font-family: Arial, Helvetica; 
 
    font-size: 100px; 
 
    mix-blend-mode: difference; 
 
    color: white; 
 
    z-index: 3 
 
} 
 

 
/* A red DIV over the scene with the blend-mode set to 'screen' */ 
 
#makered { 
 
    background-color: red; 
 
    mix-blend-mode: screen; 
 
    width:400px; 
 
    z-index:4 
 
}

<div id="whitebg"></div> 
 
<div id="blackbg"></div> 
 
<div id="makered"></div> 
 

 
<span>test</span>

Tại thời điểm này, này là chảy máu cạnh và không được hỗ trợ rộng rãi bởi tất cả các trình duyệt --it có thể là tiêu chuẩn một ngày nào đó , Tuy nhiên. Bạn có thể cần phải kích hoạt tính năng chế độ hòa trộn để làm việc này.

http://html.adobe.com/webplatform/enable/