反轉一個div在CSS

使我有兩個div，一個用白色背景，一個黑色背景：反轉一個div在CSS

<style> 
#leftside 
{ 
float:left; 
width:50%; 
height:100%; 
background:#fff; 
} 
#rightside 
{ 
float:right; 
width:50%; 
height:100%; 
background:#000; 
}

<div id="leftside"> 

</div> 
<div id="rightside"> 

</div>

我希望做的是寫一個文本經過這兩個divs，但具有倒置的顏色，取決於哪個div的那個字母的像素結束了。

喜歡的東西

我可以<span>並設置字母的顏色正常，但是當一個字母是雙方的div這個不處理的情況。

我能做什麼？（如果可能的話，我不想陷入僅支持Chrome 47和Firefox 43的CSS）。

來源

2015-08-30 Propolys

對不起，除非你把它轉換成圖像時，他們在這兩個DIV – Chanckjh

您可以使用CSS這是不可能的「背景融合模式「來做到這一點，這個css代碼的例子可以在http://codepen.io/team/css-tricks/pen/GgavOP – Ferrybig

posible dupat [根據背景顏色反轉CSS字體顏色]（http ：//stackoverflow.com/questions/16981763/invert-css-font-color-depending-o n-background-color）和[使用css反轉顏色]（http://stackoverflow.com/questions/17741629/invert-color-using-css） – Vucko

你可以做到這一點，但不是沒有醜陋的hacky代碼。

製作兩個元素，兩個文字互相重疊但隱藏在另一個元素上。通過一個例子更好地解釋。

查看jsFiddle。

<div class="wrapper"> 

    <div id="left"> 

    <span>This is a long sentence as test.</span> 

    </div> 
    <div id="right"> 

    <span>This is a long sentence as test.</span> 

    </div> 
</div>

body { 
    background: #CACACA; 
} 
.wrapper { 
    width: 300px; 
    height: 150px; 
    position: relative; 
    } 
    .wrapper span { 
    width: 300px; 
    position: absolute; 
    text-align: center; 
    top: 50%; 
    left: 0; 
    transform: translateY(-50%); 
    } 
    .wrapper #left { 
    width: 50%; 
    height: 150px; 
    background: #FFFFFF; 
    display: inline-block; 
    color: #000000; 
    position: relative; 
    } 
    .wrapper #right { 
    width: 50%; 
    height: 150px; 
    background: #000000; 
    display: inline-block; 
    margin-left: -4px; 
    color: #FFFFFF; 
    position: relative; 
    overflow: hidden; 
    } 
    .wrapper #right span { 
    left: -150px; 
    }

https://jsfiddle.net/66t8zf9s/

來源

2015-08-30 17:49:55 Jacob

反轉一個div在CSS

回答

相關問題