Làm cách nào để đảo màu bằng CSS?

83

HTML

<div>
    <p>inverted color</p>
</div>

CSS

div {
    background-color: #f00;
}
p { 
    color: /* how to use inverted color here in relation with div background ? */
}

Có cách nào để đảo ngược pmàu với CSS không?

Tại color: transparent;sao color: invert;thậm chí không có trong CSS3?

css colors

— Bhojendra Rauniyar
nguồn

1

-webkit-filter: invert (100%);

— daniel__

1

Điều này có thể rất hữu ích cho bạn: net.tutsplus.com/tutorials/html-css-techniques/...

— Ron van der Heijden

3

Trong trò chơi này, tôi đã cố gắng kết hợp 3 cách tiếp cận: bộ lọc CSS cho WebKit, bộ lọc SVG cho Firefox và thủ thuật tuyệt vời outline-color: invert do Lea Verou phát minh cho IE. Thật không may, Opera (Presto) không cắt vùng được điền đầy đủ đường viền overflow, vì vậy nó sẽ không hoạt động ở đó. Tôi hy vọng rằng bản demo này vẫn có thể hữu ích cho các thử nghiệm tiếp theo.

— Ilya Streltsyn

124

Thêm cùng màu của nền vào đoạn văn và sau đó đảo ngược bằng CSS:

div {
    background-color: #f00;
}

p { 
    color: #f00;
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

<div>
    <p>inverted color</p>
</div>

Mở rộng đoạn mã

— Bruno Lemos
nguồn

Điều này đảo ngược color, nhưng không đảo ngược background. Nó chỉ xảy ra như vậy colorđược đặt thành giống như background-color. Xem bên dưới để biết giải pháp đảo ngược phông nền.

— ᆼ ᆺ ᆼ

8

Đây là một cách tiếp cận khác bằng cách sử dụng mix-blend-mode: difference, thực sự sẽ đảo ngược bất kỳ nền nào, không chỉ là một màu duy nhất:

div {
  background-image: linear-gradient(to right, red, yellow, green, cyan, blue, violet);
}
p {
  color: white;
  mix-blend-mode: difference;
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscit elit, sed do</p>
</div>

Mở rộng đoạn mã

— ᆼ ᆺ ᆼ
nguồn

1

+1 mix-blend-mode: differencehoạt động nếu filter: invert(100%)không thành công khi được sử dụng với position: fixed(giả sử phương thức) stackoverflow.com/a/37953806/366332

— Vanni Totaro

2

Tôi nghĩ cách duy nhất để xử lý điều này là sử dụng JavaScript

Thử màu văn bản Đảo ngược này của một phần tử cụ thể

Nếu bạn làm điều này với css3, nó chỉ tương thích với các phiên bản trình duyệt mới nhất.

— Jan Peter
nguồn