Có thể tạo một loại mặt nạ nghịch đảo ngang trong CSS trong CSS không?

Tôi có hai khối (phần tử div) với một màu đen ở trên background-color: blackvà một màu trắng ở dưới cùng.

Có thể có một đoạn văn bản nằm giữa hai vùng với màu sắc đảo ngược?

Ví dụ: phần trên cùng của văn bản "FOO" sẽ có màu trắng trên nền đen và phần dưới cùng màu đen trên một vùng màu trắng.

Nếu bạn có ý nghĩa như thế này:

Chỉnh sửa: đây là cách chỉ yêu cầu một yếu tố HTML và sẽ không có gì lạ khi được đọc bởi các máy khách không có kiểu CSS như công cụ tìm kiếm, trình đọc màn hình, RSS, ứng dụng 'không có phong cách', v.v. (cảm ơn Dominic đã gợi ý thử :beforevà :after).

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

Mã quan trọng ( thêm màu sắc của bạn vào đây ):

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;
}

Thuộc tính HTML có thể là bất cứ thứ gì - Tôi đã sử dụng data-textvì nó mang tính mô tả và tránh các tác dụng phụ không mong muốn (ví dụ: bạn có thể sử dụng titlenhưng nó sẽ tạo ra chuột trong một số trình duyệt).

Nếu bạn muốn display:block;vào .topphần tử main ( ), hãy thêm một cái gì đó giống như phần tử width: 100%;bên trong ( .bottom) để nó lấp đầy nó.

Nếu bạn đang sử dụng jQuery, bạn có thể áp dụng kiểu này cho bất kỳ phần tử nào thực sự dễ dàng, tránh phải nhập thủ công data-textbit trùng lặp:

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

Bản demo của điều đó cộng với một số thứ khác như nhiều dòng, phần đệm

Đáng ngạc nhiên, có thể, mặc dù tôi chỉ khuyên nó nếu trang web của bạn là tất cả về tác động trực quan và ngữ nghĩa của mã không quan trọng, ngoài ra nó có thể sẽ không nhất quán trên các trình duyệt cũ.

Kết quả là:

Đây không phải là một giải pháp hay và tôi cá rằng đây không phải là giải pháp duy nhất ngoài đó, mà là những gì bạn muốn.

Nó yêu cầu bạn có hai phiên bản của văn bản và sử dụng định vị tuyệt đối và một số phép toán đơn giản, bạn có thể tạo hiệu ứng này.

Vì vậy, nếu chúng ta có một thùng chứa div, và trong hai cái đó nữa divs, và trong mỗi ví dụ của văn bản đó, bạn có thể sử dụng HTMLcấu trúc và CSSthuộc tính sau để đạt được điều này:

<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; }

Đây là một JSFiddle của kết quả. :)

Ngoài ra còn có một thuộc tính CSS3 , chỉ được hỗ trợ bởi webkit, đảo ngược màu sắc:

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

Và có một HTML5 Canvas Invert , đây là một ví dụ và mã đầy đủ . Nó lặp lại trên tất cả các pixel trong một hình ảnh và đảo ngược màu đỏ, xanh lục và xanh lam bằng cách trừ từng thành phần khỏi giá trị màu tối đa, 255.

Cả hai giải pháp vẫn sẽ yêu cầu 2 hình ảnh và định vị CSS cho chúng. Vì khả năng tương thích không tốt lắm, tôi chắc chắn sẽ tìm một trong những câu trả lời khác :)