1. Trang chủ
  2. Câu hỏi và trả lời
  3. Đảo ngược màu của hình ảnh bằng CSS hoặc JavaScript

Đảo ngược màu của hình ảnh bằng CSS hoặc JavaScript

2012-11-10 83 views

Trả lời

111

CSS3 có thuộc tính lọc mới sẽ chỉ hoạt động trong trình duyệt webkitsupported trong trình duyệt webkit và trong Firefox. Nó không có hỗ trợ trong IE hay Opera mini:

img { 
 
    -webkit-filter: invert(1); 
 
    filter: invert(1); 
 
    }
<img src="http://i.imgur.com/1H91A5Y.png">

Nguồn

2012-11-10 20:30:34 toxicate20

+0

Không hoạt động trong Firefox 16.0.2. Nhưng [ở đây] (http://forum.userstyles.org/discussion/32770/inverting-map-images/p1) Tôi thấy điều này có thể hoạt động: 'filter: url (dữ liệu: image/svg + xml; base64, PHN2Z. .. <địa chỉ dài> ... PC9zdmc + # invert); ', có thể không? – laggingreflex

+4

Đó là vì firefox không phải là webkit. Bạn sẽ cần phải làm một kiểm tra nếu trình duyệt là webkit, khác làm đảo ngược của bạn thông qua chuyển đổi base64. – toxicate20

+2

Bạn nói đúng, nó hoạt động trong Chrome. Tôi khá chắc chắn điều này sẽ làm việc trong Firefox như đã nói [ở đây] (https://developer.mozilla.org/en-US/docs/CSS/filter): 'filter: url (" dữ liệu: image/svg + xml ; utf8, "); 'nhưng nó không ... bất kỳ ý tưởng nào? – laggingreflex

10

có thể được thực hiện trong broswers mới lớn bằng cách sử dụng đoạn mã sau

.img { 
    -webkit-filter:invert(100%); 
    filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); 
}

Tuy nhiên, nếu bạn muốn nó làm việc trên tất cả các trình duyệt bạn cần sử dụng Javascript. Một cái gì đó như this gist sẽ thực hiện công việc.

Nguồn

2015-04-09 11:59:44 Kareem

0

Để đảo ngược từ 0 đến 1 và ngược lại, bạn có thể sử dụng thư viện này InvertImages, cung cấp hỗ trợ cho IE 10. Tôi cũng đã thử nghiệm với IE 11 và nó sẽ hoạt động.

Nguồn

2016-07-04 09:08:06 CodeMonkey

1

Bạn có thể áp dụng kiểu này qua javascript. Mã Js bên dưới.

function invert(){ 
document.getElementById("theImage").style.filter="invert(100%)"; 
}

Và đây là html

<img id="theImage" class="img-responsive" src="http://i.imgur.com/1H91A5Y.png"></img>

Bây giờ tất cả các bạn cần làm là gọi nghịch()

function invert(){ 
 
document.getElementById("theImage").style.filter="invert(100%)"; 
 
}
<h4> Click image to invert </h4> 
 

 
<img id="theImage" class="img-responsive" src="http://i.imgur.com/1H91A5Y.png" onClick="invert()" ></img>

Nguồn

2017-03-06 12:05:17

Các vấn đề liên quan

 Các vấn đề liên quan