Текст инвертируется на основе фонового изображения

Question

Возможно ли получить что-то подобное только с помощью CSS/CSS3 или с помощью javascript? но нет изображения для текста.

Answer 1

С ограниченной поддержкой со старыми браузерами, вы можете добиться этого с текстом вырезку:

для этого HTML:

<div class="filter"> 
<div class="base">SOME TEXT</div> 
</div> 

с этим CSS:

.filter { 
    width: 250px; 
    height: 250px; 
    background: -webkit-linear-gradient(-45deg, black 0%,black 50%,white 51%,white 100%); 
} 
.base { 
    width: 100%; 
    height: 100%; 
    font-size: 80px; 
    background: -webkit-linear-gradient(-45deg, white 0%,white 50%,black 51%,black 100%); 
    -webkit-background-clip: text; 
    color: transparent; 
} 

Вы получите фон из базы (которая имеет инвертированные цвета первого div), чтобы показывать только через текст.

webkit demo

Редактирование

Обнаружили, что это может быть сделано в одном элементе. Стиль будет выглядеть так:

.base { 
    width: 100%; 
    height: 100%; 
    font-size: 80px; 
    background: -webkit-linear-gradient(-45deg, white 0%,white 50%,black 51%,black 100%), -webkit-linear-gradient(-45deg, black 0%,black 50%,white 51%,white 100%); 
    -webkit-background-clip: text, border; 
    color: transparent; 
} 

Answer 2

Для достижения этой цели в CSS вам нужно будет использовать градиенты. Один для фона и один для текста, градиент будет постоянным. увидеть это их генерации: http://www.colorzilla.com/gradient-editor/ производить это:

background: #000000; /* Old browsers */ 
background: -moz-linear-gradient(-45deg, #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#000000), color-stop(50%,#000000), color-stop(51%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(-45deg, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(-45deg, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(-45deg, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); /* IE10+ */ 
background: linear-gradient(135deg, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 

главная проблема, которую вы по-прежнему сталкиваются, хотя не в состоянии «обнаружить» фоновое изображение для того, чтобы сделать цвет текста наоборот.

Если вы хотите, чтобы обнаружить фон можно посмотреть в WebKit -webkit-фон-композита, который имеет XOR и плюс-темнее и плюс-зажигалка для композитных эффектов

Надежда это помогает.