स्थानापन्न: उलटने

Question

बहुत समय पहले, के साथ पुराना ब्राउज़रों (chrome38) लोग बक्से बना सकता है ...

यह outline-color: invert उपयोग करने के लिए एक रंग है जो पृष्ठभूमि की सटीक विपरीत था चयन करने के लिए संभव हो गया था ।

आज, इस तरह के एक महान सुविधा मौजूद नहीं है अब और :(यो जो सिर्फ पृष्ठभूमि के विपरीत रंग की सीमाओं के साथ बॉक्स प्रदर्शित करने के लिए?

(आज क्रोम चाहते मेरे लिए कोई उपाय है (39) गणना outline-color: invertoutline-color:transparent करने के लिए।

पहले कि outline-color: invert एक काले रंग की brackground पर outline-color: rgb(255,255,255) को प्रदान की गई।)

अपने विचारों के लिए धन्यवाद।

Answer 1

शायद थी क्या आपके लिए चाल है?

.background { 
 
    display: inline-block; 
 
    margin: 10px; 
 
    padding: 20px; 
 
} 
 
.box { 
 
    border: 3px solid white; 
 
    height: 100px; 
 
    width: 160px; 
 
} 
 
.invert { 
 
    mix-blend-mode: difference; 
 
}

<div class="background" style="background: #ff0000"> 
 
    <div class="box invert"></div> 
 
</div> 
 

 
<div class="background" style="background: #000000"> 
 
    <div class="box invert"></div> 
 
</div> 
 

 
<div class="background" style="background: #ffffff"> 
 
    <div class="box invert"></div> 
 
</div>

http://codepen.io/Frikki/pen/BNpKYb