Thay đổi màu sắc của hình ảnh PNG qua CSS?

464

Đưa ra một PNG trong suốt hiển thị một hình dạng đơn giản màu trắng, bằng cách nào đó có thể thay đổi màu sắc của nó thông qua CSS? Một số loại lớp phủ hay không?

— Wesley
nguồn

4

Bạn có thể đặt background-colorthuộc tính CSS. Bạn có thể tạo phần không trong suốt sẽ được cố định và phần trong suốt của hình ảnh sẽ được lấp đầy bởi bất kỳ màu nào bạn muốn thông qua CSS. Đó có phải là những gì bạn muốn đạt được?

— jakub.g

2

@qbk, đây là giá trị một câu trả lời, không chỉ là một nhận xét. Và bạn đánh bại tôi 1 giây, về mặt kỹ thuật.

— Kirill G

2

Bạn có thể sử dụng các phần tử psuedo với chế độ hòa trộn để tô màu lại bất kỳ biểu tượng nào có màu đen 100% hoặc trắng 100% (nền vẫn trong suốt). Xem câu trả lời của tôi ở đây: stackoverflow.com/a/39796437/1472114

— chrscblls

569

Bạn có thể sử dụng các bộ lọc với -webkit-filtervà filter: Bộ lọc tương đối mới đối với các trình duyệt nhưng được hỗ trợ trong hơn 90% trình duyệt theo bảng CanIUse sau: https://caniuse.com/#feat=css-filters

Bạn có thể thay đổi một hình ảnh thành thang độ xám, nâu đỏ và nhiều hơn nữa (xem ví dụ).

Vì vậy, bây giờ bạn có thể thay đổi màu của tệp PNG bằng các bộ lọc.

body {
    background-color:#03030a;
    min-width: 800px;
    min-height: 400px
}
img {
    width:20%;
    float:left; 
     margin:0;
}
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }

<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="https://www.pexels.com/photo/photo-of-a-green-leaf-2563743/?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">

Mở rộng đoạn trích

_Nguồn

— Chúng tôi
nguồn

12

Vì vậy, câu trả lời ngắn gọn là không có bất kỳ giải pháp chung nào cho phần lớn các trình duyệt.

— Trilarion

18

Nhưng liệu huerotate hoặc bão hòa thực sự sẽ phản ứng với một hình ảnh trắng?

— Keith

6

Cập nhật 2016: tính năng này hiện hoạt động trong hầu hết tất cả các trình duyệt ngoại trừ IE: caniuse.com/#feat=css-filters

— Stan

4

@datatype_void Đôi khi bạn không tự kiểm soát hình ảnh bắt đầu. Vì vậy, có vẻ như bạn đồng ý rằng quan điểm của tôi là hợp lệ, bạn không thể có bất kỳ màu nào bắt đầu từ đen hoặc trắng. Ồ, và tôi đã chơi hơn 5 phút để đi đến kết luận này.

— AsoodAsItGets 19/07/2016

5

cũng xác định rằng bạn có thể làm những thứ như thế này: .gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }có nghĩa là bạn CÓ THỂ chuyển từ màu đen & trong suốt hoặc màu xám sang màu sắc và nó hoạt động ngay cả trên gifs hoạt hình

— tatsu

140

Tôi đã tìm thấy ví dụ codepen tuyệt vời này rằng bạn chèn giá trị màu hex của mình và nó trả về bộ lọc cần thiết để áp dụng màu này cho png

Trình tạo bộ lọc CSS để chuyển đổi từ màu đen sang màu hex đích

ví dụ tôi cần png của tôi để có màu sau # 1a9790

sau đó bạn phải áp dụng bộ lọc sau cho bạn png

filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);

— Fadi Abo Msalam
nguồn

12

<3 <3 <3 <3 <3 <3

— dwjohnston

2

Tôi đã đổi màu thành màu trắng từ màu xanh bằng mã này:filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);

— Anjan Biswas

Điều đó thật tuyệt!!

— Thiago Pires

2

Tác giả xứng đáng là một bức tượng! (lưu ý: khoản trả trước tùy chọn: độ sáng (0) bão hòa (100%) sẽ giết chết mọi nghi ngờ)

— Jackie Degl'Innocenti

1

Nếu bất cứ ai cần nó, đây là một chuyển đổi TS của mã này gist.github.com/dwjohnston/7e60bf5d4b6c071cd869f9f346241c08

— dwjohnston

56

Bạn có thể muốn xem phông chữ Biểu tượng. http://css-tricks.com/examples/IconFont/

EDIT: Tôi đang sử dụng Font-Awesome trong dự án mới nhất của mình. Bạn thậm chí có thể bootstrap nó. Đơn giản chỉ cần đặt điều này trong <head>:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">

<!-- And if you want to support IE7, add this aswell -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">

Và sau đó tiếp tục và thêm một số liên kết biểu tượng như thế này:

<a class="icon-thumbs-up"></a>

Đây là bảng cheat đầy đủ

--biên tập--

Font-Awesome sử dụng các tên lớp khác nhau trong phiên bản mới, có lẽ vì điều này làm cho các tệp CSS nhỏ hơn đáng kể và để tránh các lớp css mơ hồ. Vì vậy, bây giờ bạn nên sử dụng:

<a class="fa fa-thumbs-up"></a>

EDIT 2:

Chỉ cần tìm ra github cũng sử dụng phông chữ biểu tượng của riêng mình: Octicons Tải xuống miễn phí. Họ cũng có một số mẹo về cách tạo phông chữ biểu tượng rất riêng của bạn .

— Jules Colle
nguồn

Font Awesome sống theo tên của nó.

— HerrimanCoder

+1 cho suy nghĩ vượt trội. Và ngày nay, có những ứng dụng trực tuyến dễ sử dụng để giúp bạn tạo một webfont từ một hình ảnh (svg).

— yvan vander sanden

Nếu <a class="icon-thumbs-up"> </a> là tên lớp cũ và <a class="fa fa-thumbs-up"> </a> là tên mới tôi không nghĩ là làm cho CSS nhỏ hơn, tôi có thể thấy một khoảng trắng bổ sung giữa fa và fa-thumbs-up, thêm ít nhất 1 byte bổ sung vào tệp CSS đó nếu tôi không nhầm?

— Brandito

Font Awesome rất tuyệt trong ngày của nó, thật không may, nó chặn kết xuất, điều đó làm cho người dùng google và người dùng không hài lòng. Trước tiên, chúng tôi đã giải quyết vấn đề này bằng cách xóa các phông chữ không sử dụng khỏi cả tệp CSS và tệp phông chữ nhị phân, giảm khoảng một nửa dữ liệu. Bây giờ chúng tôi đang trong quá trình loại bỏ hoàn toàn và thay thế bằng một sprite đơn giản, không kết xuất chặn (DOM và CSSOM xử lý nhanh hơn, làm cho các phần tử trên trang xuất hiện nhanh hơn) và sẽ giảm 75% dữ liệu xuống còn 6KB. FA là khoảng 100KB. Mặt nạ CSS có thể giúp ích trong trường hợp của chúng tôi, nhưng có lẽ không cần thiết.

— YK

25

Tôi đã có thể làm điều này bằng bộ lọc SVG. Bạn có thể viết một bộ lọc nhân màu của hình ảnh nguồn với màu bạn muốn thay đổi. Trong đoạn mã dưới đây, màu lũ là màu mà chúng ta muốn thay đổi màu hình ảnh thành (màu đỏ trong trường hợp này.) FeCompozit cho bộ lọc biết cách chúng ta xử lý màu. Công thức của feCompozit với số học là (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4) trong đó i1 và i2 là màu đầu vào cho in / in2 tương ứng. Vì vậy, chỉ định k1 = 1 có nghĩa là nó sẽ chỉ làm i1 * i2, có nghĩa là nhân cả hai màu đầu vào với nhau.

Lưu ý: Điều này chỉ hoạt động với HTML5 vì điều này đang sử dụng SVG nội tuyến. Nhưng tôi nghĩ rằng bạn có thể làm cho nó hoạt động với trình duyệt cũ hơn bằng cách đặt SVG vào một tệp riêng. Tôi chưa thử cách tiếp cận này.

Đây là đoạn trích:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask1">
      <feFlood flood-color="#ff0000" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask1)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask2">
      <feFlood flood-color="#00ff00" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask2)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask3">
      <feFlood flood-color="#0000ff" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask3)" />
</svg>

Mở rộng đoạn trích

— Vasan Jiaramaneetwesin
nguồn

4

Người đàn ông bạn đang bị cướp về câu trả lời này. Bất cứ ai đang tìm cách tô màu hình ảnh ngoài bộ lọc: hue-rotation có thể làm - đây là cách để làm điều đó.

— MaxPRafferty 17/03/2017

23

Thẻ img có thuộc tính nền giống như mọi thuộc tính khác. Nếu bạn có một PNG màu trắng với hình dạng trong suốt, giống như một stprint, thì bạn có thể làm điều này:

<img src= 'stencil.png' style= 'background-color: red'>

— Kirill G
nguồn

147

Tôi muốn phần màu trắng khác màu, không phải phần trong suốt.

— Wesley

2

giải pháp tốt nhất tôi tìm thấy cho đến nay. Quá tệ, nó sẽ chỉ hoạt động nếu bạn sử dụng màu nền vững chắc trên các trang web của mình

— Jules Colle

8

@Wesley bạn cần đảo ngược hình ảnh sau đó (để bit trắng trở nên trong suốt và phần còn lại màu trắng) mà bạn có thể thực hiện bằng cách sử dụng trình chỉnh sửa hình ảnh và mặt nạ yêu thích của mình.

— Charles Goodwin

5

@Charlesoodwin Điều đó chỉ hoạt động sau đó hình ảnh được đặt trong một nền trắng.

— Alex

21

Đúng :)

Surfin 'Safari - Lưu trữ Blog »Mặt nạ CSS

WebKit hiện hỗ trợ mặt nạ alpha trong CSS. Mặt nạ cho phép bạn phủ nội dung của hộp với một mẫu có thể được sử dụng để loại bỏ các phần của hộp đó trong màn hình cuối cùng. Nói cách khác, bạn có thể cắt thành các hình phức tạp dựa trên alpha của hình ảnh.
[...]
Chúng tôi đã giới thiệu các thuộc tính mới để cung cấp cho các nhà thiết kế Web nhiều quyền kiểm soát đối với các mặt nạ này và cách chúng được áp dụng. Các thuộc tính mới tương tự như các thuộc tính hình nền và đường viền đã tồn tại.
-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-clip (background-clip)
-webkit-mask-origin (background-origin)
-webkit-mask-image (background-image)
-webkit-mask-repeat (background-repeat)
-webkit-mask-composite (background-composite)
-webkit-mask-box-image (border-image)

— beowow89
nguồn

1

Đó có phải là một phần của bất kỳ tiêu chuẩn nào (chưa có), vì tôi không tìm thấy bất kỳ thông tin nào không liên quan đến Webkit, hay đó chỉ là hương vị của Apple? Có vẻ như W3 đang đề xuất SVG cho các giai đoạn như vậy: w3.org/TR/SVG/masking.html

— feeela

3

Đáng buồn thay, đây dường như chỉ là webkit và blog gian lận bằng cách sử dụng hình ảnh tổng hợp thay vì các ví dụ thực tế. Câu trả lời này là một chút cá trích đỏ.

— Charles Goodwin

17

Trong hầu hết các trình duyệt , bạn có thể sử dụng các bộ lọc:

trên cả hai <img>yếu tố và hình ảnh nền của các yếu tố khác
và đặt chúng tĩnh trong CSS của bạn hoặc sử dụng JavaScript một cách linh hoạt

Xem các bản demo dưới đây.

`<img>` yếu tố

Bạn có thể áp dụng kỹ thuật này cho một <img>yếu tố:

#original, #changed {
    width: 45%;
    padding: 2.5%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}

<img id="original" src="http://i.stack.imgur.com/rfar2.jpg" />

<img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />

Mở rộng đoạn trích

Hinh nên

Bạn có thể áp dụng kỹ thuật này cho ảnh nền:

#original, #changed {
    background: url('http://i.stack.imgur.com/kaKzj.jpg');
    background-size: cover;
    width: 30%;
    margin: 0 10% 0 10%;
    padding-bottom: 28%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}

<div id="original"></div>

<div id="changed"></div>

Mở rộng đoạn trích

JavaScript

Bạn có thể sử dụng JavaScript để đặt bộ lọc khi chạy:

var element = document.getElementById("changed");
var filter = 'hue-rotate(120deg) saturate(2.4)';
element.style['-webkit-filter'] = filter;
element.style['filter'] = filter;

#original, #changed {
    margin: 0 10%;
    width: 30%;
    float: left;
    background: url('http://i.stack.imgur.com/856IQ.png');
    background-size: cover;
    padding-bottom: 25%;
}

<div id="original"></div>

<div id="changed"></div>

Mở rộng đoạn trích

— John Slegers
nguồn

6

Câu hỏi là về việc tô màu một hình ảnh trắng với nền trong suốt. hue-rotatekhông hoạt động trên nền trắng.

— Synetech

17

Hãy nghĩ rằng tôi có một giải pháp cho điều này đó là a) chính xác những gì bạn đang tìm kiếm 5 năm trước và b) đơn giản hơn một chút so với các tùy chọn mã khác ở đây.

Với bất kỳ png trắng nào (ví dụ: biểu tượng màu trắng trên nền trong suốt), bạn có thể thêm một :: sau bộ chọn để recolor.

.icon {
    background: url(img/icon.png); /* Your icon */
    position: relative; /* Allows an absolute positioned psuedo element */
}

.icon::after{
    position: absolute; /* Positions psuedo element relative to .icon */
    width: 100%; /* Same dimensions as .icon */
    height: 100%;
    content: ""; /* Allows psuedo element to show */
    background: #EC008C; /* The color you want the icon to change to */
    mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
}

Xem codepen này (áp dụng trao đổi màu khi di chuột): http://codepen.io/chrscblls/pen/bwAXZO

— chrscblls
nguồn

Tôi đã chỉnh lại hình ảnh của imgur, gặp một số rắc rối khi tải nó.

— chrscblls

Trong phiên bản Chrome mới nhất, có vẻ như nền (trong suốt) cũng đang được đặt thành màu. Trong ví dụ được liên kết, khi tôi di chuột, tôi chỉ thấy một hình vuông màu hồng đục ... Hoạt động tốt trong Firefox.

— logidelic

1

@chrscblls Liên kết đã chết.

— Steven Lu

15

Một dòng đơn giản nhất làm việc cho tôi:

filter: opacity(0.5) drop-shadow(0 0 0 blue);

Bạn có thể điều chỉnh độ mờ từ 0 đến 1 để làm cho màu sáng hơn hoặc tối hơn.

— Phục hồi chức năng
nguồn

Đẹp. Điều này tránh tất cả các hạn chế của các giải pháp khác ở đây.

— cdonner

3

lặp lại bóng đổ 2-3 lần để làm cho nó mạnh hơn

— djdance

1

GENIUS GIẢI PHÁP, có vẻ hơi lộn xộn trong CSS, nhưng với một nhận xét, nó hoàn toàn dễ hiểu. Cảm ơn!

— Richard KeMiKaL GeNeRaL Denton

Sẽ không hoạt động để có được màu chính xác, nó luôn là một sự pha trộn giữa màu gốc và màu mới.

— Thụy Sĩ

Cách tiếp cận này làm biến dạng hình ảnh một chút và nó trở nên tồi tệ hơn mỗi khi bóng đổ được áp dụng. Giống như tạo một bản sao của một bản sao, kết quả khác với bản gốc.

— SMAG

8

Tôi đã tìm thấy điều này trong khi googling, tôi thấy làm việc tốt nhất cho tôi ...

HTML

<div class="img"></div>

CSS

.img {
  background-color: red;
  width: 60px;
  height: 60px;
   -webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png');
}

http://jsfiddle.net/a63b0exm/

— Muthukumar Anbalagan
nguồn

Tác phẩm này, tôi đã bình chọn. Nhưng chỉ để ghi lại, nó có một số vấn đề như có thể kích thước hình nền, có thể định vị hình ảnh và nó lặp lại.

— Daniel

Ồ, tôi thực sự đã không thử những ... thử liên kết dưới đây. developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image cảm ơn, Daniel

— Muthukumar Anbalagan

7

Tôi yêu cầu một màu cụ thể, vì vậy bộ lọc không hoạt động với tôi.

Thay vào đó, tôi đã tạo một div, khai thác nhiều ảnh nền CSS và hàm gradient tuyến tính (tạo chính hình ảnh). Nếu bạn sử dụng chế độ hòa trộn lớp phủ, hình ảnh thực tế của bạn sẽ được trộn với hình ảnh "gradient" được tạo có chứa màu bạn muốn (ở đây, # BADA55)

.colored-image {
        background-image: linear-gradient(to right, #BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png");
        background-blend-mode: overlay;
        background-size: contain;
        width: 200px;
        height: 200px;        
    }

<div class="colored-image"></div>

Mở rộng đoạn trích

— rolznz
nguồn

Không làm việc cho tôi. Tôi không thể biết tại sao, tôi sao chép chính xác dán

— Vic Seedoubleyew

@VicSeedoubleyew đoạn trích hoạt động tốt. Kiểm tra div của bạn bằng các công cụ dev để đảm bảo CSS của bạn thực sự được áp dụng. Ngoài ra, hãy đảm bảo URL cho hình ảnh của bạn hợp lệ nếu bạn không sử dụng URL tôi cung cấp. EDIT: Nếu đoạn mã không phù hợp với bạn, bạn có thể đang sử dụng trình duyệt đã lỗi thời hoặc không hỗ trợ chức năng gradient tuyến tính.

— rolznz

5

Trả lời vì tôi đang tìm kiếm một giải pháp cho việc này.

cây bút trong câu trả lời @chrscblls hoạt động tốt nếu bạn có nền trắng hoặc đen, nhưng tôi thì không. Cũng như vậy, hình ảnh được tạo bằng ng-repeat, vì vậy tôi không thể có url của chúng trong css VÀ bạn không thể sử dụng :: sau trên thẻ img.

Vì vậy, tôi đã tìm ra một công việc xung quanh và nghĩ rằng nó có thể giúp đỡ mọi người nếu họ quá vấp ngã ở đây.

Vì vậy, những gì tôi đã làm là khá giống nhau với ba điểm khác biệt chính:

url nằm trong thẻ img của tôi, tôi đặt nó (và một nhãn) trong một div khác mà :: sau sẽ hoạt động.
'chế độ hòa trộn' được đặt ở mức 'khác biệt' thay vì 'nhân' hoặc 'màn hình'.
Tôi đã thêm một :: trước với cùng một giá trị để :: sau sẽ thực hiện 'sự khác biệt' của 'sự khác biệt' được tạo bởi :: trước và tự hủy.

Để thay đổi nó từ đen sang trắng hoặc trắng sang đen, màu nền cần phải là màu trắng. Từ màu đen đến màu sắc, bạn có thể chọn bất cứ màu nào. Từ màu trắng đến màu tho, bạn sẽ cần chọn màu đối lập với màu bạn muốn.

.divClass{
   position: relative;
   width: 100%;
   height: 100%;
   text-align: left;
}
.divClass:hover::after, .divClass:hover::before{
   position: absolute;
   width: 100%;
   height: 100%;
   background: #FFF;
   mix-blend-mode: difference;
   content: "";
}

https://codepen.io/spaceplant/pen/oZyMYG

— Salix
nguồn

3

Không cần toàn bộ bộ phông chữ nếu bạn chỉ cần một biểu tượng, cộng với tôi cảm thấy nó "sạch" hơn như là một yếu tố riêng lẻ. Vì vậy, với mục đích này, trong HTML5, bạn có thể đặt một SVG trực tiếp bên trong luồng tài liệu. Sau đó, bạn có thể xác định một lớp trong biểu định kiểu .CSS của mình và truy cập màu nền của nó bằng thuộc filltính:

Fiddle làm việc: http://jsfiddle.net/qmsj0ez1/

Lưu ý rằng, trong ví dụ, tôi đã sử dụng :hoverđể minh họa hành vi; Nếu bạn chỉ muốn thay đổi màu sắc cho trạng thái "bình thường", bạn nên loại bỏ kính giả.

— Pere
nguồn

1

Để thay đổi màu sắc theo nghĩa đen, bạn có thể kết hợp chuyển đổi CSS với bộ lọc -webkit trong đó khi có điều gì đó xảy ra, bạn sẽ gọi bộ lọc -webkit bạn chọn. Ví dụ:

img {
    -webkit-filter:grayscale(0%);
    transition: -webkit-filter .3s linear;
    }
img:hover 
    {
    -webkit-filter:grayscale(75%);
    }

— beta208
nguồn

1

Khi thay đổi hình ảnh từ đen sang trắng hoặc trắng sang đen, bộ lọc xoay màu không hoạt động, vì đen và trắng không phải là màu kỹ thuật. Thay vào đó, thay đổi màu đen và trắng (từ đen sang trắng hoặc ngược lại) phải được thực hiện với thuộc tính bộ lọc đảo ngược.

.img1 { filter: invert(100%); }

— Samuel stankiewicz
nguồn

0

body{
  background: #333 url(/images/classy_fabric.png);
  width: 430px;
  margin: 0 auto;
  padding: 30px;
}
.preview{
  background: #ccc;
  width: 415px;
  height: 430px;
  border: solid 10px #fff;
}

input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 25px;
  height: 25px;
  margin: 5px 0 5px 5px;
  background-size: 225px 70px;
  position: relative;
  float: left;
  display: inline;
  top: 0;
  border-radius: 3px;
  z-index: 99999;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000;
}

input[type='radio']:hover{
  -webkit-filter: opacity(.4);
  filter: opacity(.4);    
}

.red{
  background: red;
}

.red:checked{
  background: linear-gradient(brown, red)
}

.green{
  background: green;
}

.green:checked{
  background: linear-gradient(green, lime);
}

.yellow{
  background: yellow;
}

.yellow:checked{
  background: linear-gradient(orange, yellow);
}

.purple{
  background: purple;
}

.pink{
  background: pink;
}

.purple:checked{
  background: linear-gradient(purple, violet);
}

.red:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
  filter: opacity(.5) drop-shadow(0 0 0 red);
}

.green:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
  filter: opacity(.5) drop-shadow(0 0 0 green);
}

.yellow:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
  filter: opacity(.5) drop-shadow(0 0 0 yellow);
}

.purple:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 purple);
  filter: opacity(.5) drop-shadow(0 0 0 purple);
}

.pink:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 pink);
  filter: opacity(.5) drop-shadow(0 0 0 pink);
}


img{
  width: 394px;
  height: 375px;
  position: relative;
}

.label{
  width: 150px;
  height: 75px;
  position: absolute;
  top: 170px;
  margin-left: 130px;
}

::selection{
  background: #000;
}

<div class="preview">
  <input class='red' name='color' type='radio' />
  <input class='green' name='color' type='radio' />
    <input class='pink' name='color' type='radio' />
  <input checked class='yellow' name='color' type='radio' />
  <input class='purple' name='color' type='radio' />  
  <img src="https://i.stack.imgur.com/bd7VJ.png"/>
</div>

Mở rộng đoạn trích

Nguồn: https://codepen.io/taryaoui/pen/EKkcu

— Bashirpour
nguồn

Thay đổi màu sắc của hình ảnh PNG qua CSS?

Surfin 'Safari - Lưu trữ Blog »Mặt nạ CSS

<img> yếu tố

Hinh nên

JavaScript

`<img>` yếu tố