заворачивания ДИВ сделать в CSS

У меня есть две дивы, один с белым фоном, один с черным фоном:заворачивания ДИВ сделать в 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> и установить цвет письмо должным образом, но это не справиться с ситуацией, когда одна буква находится на обоих дивы.

Все, что я могу сделать? (если возможно, я бы хотел не перейти к CSS, поддерживающему только поддержку Chrome 47 и Firefox 43).

источник

2015-08-30 Propolys

жаль, что это не возможно, если вы сделаете его в изображение, когда они находятся на обоих DIV – Chanckjh

Вы можете быть в состоянии использовать CSS «фон-смесь -mode "для этого, примеры этого кода css можно найти по адресу http://codepen.io/team/css-tricks/pen/GgavOP – Ferrybig

posible duplicat [Invert CSS font-color в зависимости от цвета фона] (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

Вы можете сделать это, но не без уродливого взломанного кода.

Сделайте два элемента с двумя текстами, которые накладываются друг на друга, но скрыты на другом элементе. Лучше объясняется примером.

Проверьте 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

заворачивания ДИВ сделать в CSS

ответ

Смежные вопросы