É possível criar um tipo de "máscara invertida" horizontal em CSS?

Eu tenho dois blocos (elementos div) com um preto na parte superior background-color: blacke um branco na parte inferior.

É possível ter um pedaço de texto que contenha as duas zonas com cores invertidas?

Por exemplo: a parte superior do texto "FOO" será branca em preto e a parte inferior preta sobre uma região branca.

Se você quer dizer algo como isto:

Edit: aqui está uma maneira que requer apenas um elemento HTML e, portanto, não será estranho quando lida por clientes que não usam CSS, como mecanismos de pesquisa, leitores de tela, RSS, aplicativos 'sem estilo' etc. (obrigado a Dominic por sugerir tentar :beforee :after)

http://jsbin.com/UtUlIFO/2/edit

O código importante ( adicione suas cores a isso ):

HTML: <div class="someclass" data-text="Some text">Some text</div>

CSS:

.someclass {     /* bottom half */
  position: relative;
  display: inline-block;
}

.someclass:after {     /* top half */
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 0px;
  height: 50%;
  overflow: hidden;
}

O atributo HTML pode ser qualquer coisa - usei data-textporque é descritivo e evita efeitos colaterais indesejáveis ​​(por exemplo, você pode usar, titlemas criaria mouseovers em alguns navegadores).

Se você deseja display:block;o .topelemento main ( ), adicione algo como width: 100%;o .bottomelemento inner ( ) para preenchê-lo.

Se você estiver usando jQuery, poderá aplicar esse estilo a qualquer elemento com muita facilidade, evitando digitar manualmente o data-textbit duplicado:

$('.someElement').each(function(){
  $(this).addClass('someclass').attr('data-text',$(this).text());
});

Demonstração disso, além de outras coisas, como várias linhas, preenchimento

Surpreendentemente, é possível, embora eu só aconselho que se você estiver site é tudo sobre o impacto visual e a semântica do código não importa, além disso, ele provavelmente não vai ser muito consistente em navegadores mais antigos.

O resultado é:

Esta não é uma solução bonita, e aposto que não é a única por aí, mas faz o que você deseja.

Requer que você tenha duas instâncias do texto e, usando posicionamento absoluto e algumas contas simples, é possível criar esse efeito.

Portanto, se tivermos um contêiner div, e dentro desses dois divs, e em cada um deles uma instância do texto, você poderá usar a seguinte HTMLestrutura e CSSpropriedades para conseguir isso:

<div class="container">
    <div class="black">
       <div class="text">Invert</div>
    </div>
    <div class="white">
       <div class="text">Invert</div>
    </div>
</div>

.container{position:relative; width:200px; height:100px; display:block; margin:0px; padding:0px; }

.black, .white{position:absolute; left:0px; background:#000; width:200px; height:50px; margin:0px; padding:0px; overflow:hidden; }

.black{top:0px; }

.white{bottom:0px; background:#fff; }

.text{position:absolute; color:#fff; font-size:70px; padding:0px; }

.black .text{bottom:-40px; }

.white .text{top:-40px; color:#000; }

Aqui está um JSFiddle do resultado. :)

Há também uma propriedade CSS3 , suportada apenas pelo webkit, que inverte as cores:

image {
 -webkit-filter: invert(100%);  
}

E há um HTML5 Canvas Invert , aqui está um exemplo e o código completo . Ele itera sobre todos os pixels de uma imagem e inverte vermelho, verde e azul subtraindo cada componente do valor máximo de cor 255.

Ambas as soluções ainda exigiriam 2 imagens e posicionamento CSS para elas. Como a compatibilidade não é muito boa, eu definitivamente aceitaria uma das outras respostas :)