Hướng dẫn how do i grey out an image in html? - làm cách nào để tô xám một hình ảnh trong html?

Question

Của bạn ở đây:

Nội dung chính Show

Kiểu phần tử HTML cách - hình ảnh màu xám
Câu trả lời
Hướng dẫn CSS: Hình ảnh CSS
0% (0) là mặc định và biểu thị hình ảnh gốc. 100% sẽ làm cho hình ảnh hoàn toàn màu xám (được sử dụng cho hình ảnh đen và trắng).
Thay đổi tất cả hình ảnh thành Đen và Trắng (100% Xám):
Định nghĩa và cách sử dụng
Chuyển đổi hình ảnh thành SEPIA.
Bộ lọc: URL (SVG-URL#Element-ID)
Bộ lọc: URL (SVG-URL#Element-ID)
Bộ lọc: URL (SVG-URL#Element-ID)
Bộ lọc: URL (SVG-URL#Element-ID)
Bộ lọc: URL (SVG-URL#Element-ID)
Bộ lọc: URL (SVG-URL#Element-ID)
Bộ lọc: URL (SVG-URL#Element-ID)
Bộ lọc: URL (SVG-URL#Element-ID)
Bộ lọc: URL (SVG-URL#Element-ID)
Bộ lọc: URL (SVG-URL#Element-ID)
Bộ lọc: URL (SVG-URL#Element-ID)
Bộ lọc: URL (SVG-URL#Element-ID)
Bộ lọc: URL (SVG-URL#Element-ID)
Làm thế nào để bạn tạo một hình ảnh màu xám trong HTML?
Làm thế nào để tôi màu xám một hình ảnh?
Làm thế nào để bạn thêm một màu tối vào một hình ảnh trong HTML?
Làm thế nào để bạn tạo ra một hình ảnh màu xám trong CSS?

<a href="#"><img src="img.jpg" /></a>

CSS Grey:

img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}

Ungray:

a:hover img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: none ; /* IE6-9 */
    zoom:1; /* needed to trigger "hasLayout" in IE if no width or height is set */
    -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    }

Tôi đã tìm thấy nó tại: http://zkiwi.com/topic/chuyen-hinh-mau-ell

EDIT: IE10+ không hỗ trợ các bộ lọc DX như IE9 và trước đó, cũng không hỗ trợ phiên bản tiền tố của bộ lọc Greyscale. Bạn có thể sửa nó, sử dụng một trong hai giải pháp dưới đây: IE10+ does not support DX filters as IE9 and earlier have done, nor does it support a prefixed version of the greyscale filter. You can fix it, use one in two solutions below:

Đặt IE10+ để kết xuất bằng chế độ tiêu chuẩn IE9 bằng cách sử dụng phần tử meta sau trong đầu: <meta http-equiv="X-UA-Compatible" content="IE=9">
Sử dụng lớp phủ SVG trong IE10 để hoàn thành bộ lọc internet exploring gryscaling 10 - how để áp dụng bộ lọc thang độ xám?

Kiểu phần tử HTML cách - hình ảnh màu xám

Quay lại IMG & NBSP; ↑

Câu hỏi

Chúng tôi muốn biết làm thế nào để màu xám ra hình ảnh.

Câu trả lời


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
img {<!--  w ww .j a v  a 2  s . c o  m-->
  -webkit-filter: grayscale(100%);
}
</style>
</head>
<body>
  <img src="http://www.java2s.com/style/download.png">
</body>
</html>

Mã trên được hiển thị như sau:

Quay lại IMG & NBSP; ↑

Thí dụ

Thay đổi tất cả hình ảnh thành Đen và Trắng (100% Xám):

img {& nbsp; & nbsp; filter: grayscale (100%);}
filter: grayscale(100%);
}

Hãy tự mình thử »

Các trang liên quan More "Try it Yourself" examples below.

Hướng dẫn CSS: Hình ảnh CSS

Tham khảo HTML DOM: thuộc tính bộ lọc

Làm thế nào để bạn tạo một hình ảnh màu xám trong HTML?

0% (0) là mặc định và biểu thị hình ảnh gốc. 100% sẽ làm cho hình ảnh hoàn toàn màu xám (được sử dụng cho hình ảnh đen và trắng).

Làm thế nào để tôi màu xám một hình ảnh?

Thay đổi hình ảnh thành thang độ xám hoặc thành màu đen và trắng nhấp chuột phải hình ảnh mà bạn muốn thay đổi, sau đó nhấp vào Định dạng hình ảnh trên menu phím tắt. Nhấp vào tab Hình ảnh. Trong kiểm soát hình ảnh, trong danh sách màu, nhấp vào thang độ xám hoặc đen và trắng.

Làm thế nào để bạn thêm một màu tối vào một hình ảnh trong HTML?
Hàm độ sáng () có thể được sử dụng làm giá trị để áp dụng hệ số nhân tuyến tính để làm cho nó có vẻ tối hơn hoặc sáng hơn so với bản gốc. Để làm cho hình ảnh tối hơn, bất kỳ giá trị nào dưới 100% đều có thể được sử dụng để làm tối hình ảnh theo tỷ lệ phần trăm đó.	Làm thế nào để bạn tạo ra một hình ảnh màu xám trong CSS? 18.0 -webkit-	13.0	35.0	Trong CSS, thuộc tính bộ lọc được sử dụng để chuyển đổi hình ảnh thành hình ảnh thang độ xám. Thuộc tính bộ lọc chủ yếu được sử dụng để đặt hiệu ứng trực quan của hình ảnh. Ví dụ 1: Trong ví dụ này, sử dụng Bộ lọc: GRAYSCALE (100%) để chuyển đổi hình ảnh thành thang độ xám. 6.0 -webkit-	Thí dụ 15.0 -webkit-

Thay đổi tất cả hình ảnh thành Đen và Trắng (100% Xám):

img {& nbsp; & nbsp; filter: grayscale (100%);}

Mẹo: Thêm ví dụ "Hãy thử nó" dưới đây. To use multiple filters, separate each filter with a space (See "More Examples" below).

Định nghĩa và cách sử dụng

Thuộc tính filter xác định các hiệu ứng hình ảnh (như mờ và bão hòa) với một phần tử (thường là). The filters that use percentage values (i.e. 75%), also accept the value as decimal (i.e. 0.75).

Đưa ra bản chạy thử ❯	Hỗ trợ trình duyệt	Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Các số theo sau là -webkit- Chỉ định phiên bản đầu tiên hoạt động với tiền tố.	Tài sản	lọc
53.018.0 & nbsp; -webkit-	9.16.0 & nbsp; -webkit- 40.015.0 & nbsp; -webkit-	lọc
53.018.0 & nbsp; -webkit-	9.16.0 & nbsp; -webkit- 40.015.0 & nbsp; -webkit- 100% (1) is default and represents the original image. Values over 100% will provide brighter results.	lọc
53.018.0 & nbsp; -webkit-	9.16.0 & nbsp; -webkit- 40.015.0 & nbsp; -webkit- 100% (1) is default, and represents the original image. Values over 100% will provide results with more contrast.	lọc
53.018.0 & nbsp; -webkit-	9.16.0 & nbsp; -webkit- 40.015.0 & nbsp; -webkit- h-shadow - Required. Specifies a pixel value for the horizontal shadow. Negative values place the shadow to the left of the image. CSS Cú pháp Bộ lọc: Không có \| Blur () \| Độ sáng () \| độ tương phản () \| Drop-Shadow () \| thang độ xám () \| Hue-rotate () \| Đảo ngược () \| Độ mờ () \| bão hòa () \| SEPIA () \| url (); Mẹo: Để sử dụng nhiều bộ lọc, hãy tách từng bộ lọc bằng một không gian (xem "thêm các ví dụ" bên dưới). Note: Chrome, Safari and Opera, and maybe other browsers, do not support this 4th length; it will not render if added. Chức năng lọc Lưu ý: Các bộ lọc sử dụng các giá trị phần trăm (nghĩa là 75%), cũng chấp nhận giá trị là thập phân (tức là 0,75). Lọc Sự mô tả This filter is similar to the box-shadow property.	lọc
53.018.0 & nbsp; -webkit-	9.16.0 & nbsp; -webkit- 0% (0) là mặc định và biểu thị hình ảnh gốc. 100% sẽ làm cho hình ảnh hoàn toàn màu xám (được sử dụng cho hình ảnh đen và trắng). 100% will make the image completely gray (used for black and white images). Làm thế nào để tôi màu xám một hình ảnh? Negative values are not allowed.	lọc
53.018.0 & nbsp; -webkit-	9.16.0 & nbsp; -webkit- Lưu ý: Giá trị tối đa là 360deg. Maximum value is 360deg.	Thử nghiệm ❯
Đảo ngược (%)	Đảo ngược các mẫu trong hình ảnh. 0% (0) là mặc định và biểu thị hình ảnh gốc. 100% sẽ làm cho hình ảnh đảo ngược hoàn toàn. 100% will make the image completely inverted. Lưu ý: Không được phép các giá trị âm. Negative values are not allowed.	Thử nghiệm ❯
Đảo ngược (%)	Đảo ngược các mẫu trong hình ảnh. 0% (0) là mặc định và biểu thị hình ảnh gốc. 100% sẽ làm cho hình ảnh đảo ngược hoàn toàn. 100% (1) is default and represents the original image (no transparency). Lưu ý: Không được phép các giá trị âm. Negative values are not allowed. Tip: This filter is similar to the opacity property.	Thử nghiệm ❯
Đảo ngược (%)	Đảo ngược các mẫu trong hình ảnh. 0% (0) là mặc định và biểu thị hình ảnh gốc. 100% sẽ làm cho hình ảnh đảo ngược hoàn toàn. 100% is default and represents the original image. Values over 100% provides super-saturated results. Lưu ý: Không được phép các giá trị âm. Negative values are not allowed.	Thử nghiệm ❯
Độ mờ (%)	Đặt mức độ mờ cho hình ảnh. Levels độ mờ mô tả mức độ minh bạch, trong đó: 0% là hoàn toàn trong suốt.100% (1) là mặc định và biểu thị hình ảnh gốc (không minh bạch). 100% will make the image completely sepia. Lưu ý: Không được phép các giá trị âm. Negative values are not allowed.	Thử nghiệm ❯
Độ mờ (%)	Đặt mức độ mờ cho hình ảnh. Levels độ mờ mô tả mức độ minh bạch, trong đó: 0% là hoàn toàn trong suốt.100% (1) là mặc định và biểu thị hình ảnh gốc (không minh bạch).
Lưu ý: Không được phép các giá trị âm. TIP: Bộ lọc này tương tự như thuộc tính Opacity.	bão hòa (%)
Bão hòa hình ảnh.	0% (0) sẽ làm cho hình ảnh hoàn toàn không bão hòa.100% là mặc định và đại diện cho hình ảnh gốc. Giá trị hơn 100% cung cấp kết quả siêu bão hòa.

SEPIA (%)

Chuyển đổi hình ảnh thành SEPIA.

0% (0) là mặc định và biểu thị hình ảnh gốc. 100% sẽ làm cho hình ảnh hoàn toàn sepia.

url ()
filter: blur(5px);
}

Hàm URL () lấy vị trí của tệp XML chỉ định bộ lọc SVG và có thể bao gồm neo vào một phần tử bộ lọc cụ thể. Thí dụ:

Bộ lọc: URL (SVG-URL#Element-ID)

ban đầu

Đặt thuộc tính này thành giá trị mặc định của nó. Đọc về ban đầu
filter: blur(35px);
}

Hàm URL () lấy vị trí của tệp XML chỉ định bộ lọc SVG và có thể bao gồm neo vào một phần tử bộ lọc cụ thể. Thí dụ:

Bộ lọc: URL (SVG-URL#Element-ID)

ban đầu

Đặt thuộc tính này thành giá trị mặc định của nó. Đọc về ban đầu
filter: brightness(200%);
}

Hàm URL () lấy vị trí của tệp XML chỉ định bộ lọc SVG và có thể bao gồm neo vào một phần tử bộ lọc cụ thể. Thí dụ:

Bộ lọc: URL (SVG-URL#Element-ID)

ban đầu

Đặt thuộc tính này thành giá trị mặc định của nó. Đọc về ban đầu
filter: contrast(200%);
}

Hàm URL () lấy vị trí của tệp XML chỉ định bộ lọc SVG và có thể bao gồm neo vào một phần tử bộ lọc cụ thể. Thí dụ:

Bộ lọc: URL (SVG-URL#Element-ID)

ban đầu

Đặt thuộc tính này thành giá trị mặc định của nó. Đọc về ban đầu
filter: drop-shadow(8px 8px 10px gray);
}

Hàm URL () lấy vị trí của tệp XML chỉ định bộ lọc SVG và có thể bao gồm neo vào một phần tử bộ lọc cụ thể. Thí dụ:

Bộ lọc: URL (SVG-URL#Element-ID)

ban đầu

Đặt thuộc tính này thành giá trị mặc định của nó. Đọc về ban đầu
filter: grayscale(50%);
}

Hàm URL () lấy vị trí của tệp XML chỉ định bộ lọc SVG và có thể bao gồm neo vào một phần tử bộ lọc cụ thể. Thí dụ:

Bộ lọc: URL (SVG-URL#Element-ID)

ban đầu

Đặt thuộc tính này thành giá trị mặc định của nó. Đọc về ban đầu
filter: hue-rotate(90deg);
}

Hàm URL () lấy vị trí của tệp XML chỉ định bộ lọc SVG và có thể bao gồm neo vào một phần tử bộ lọc cụ thể. Thí dụ:

Bộ lọc: URL (SVG-URL#Element-ID)

ban đầu

Đặt thuộc tính này thành giá trị mặc định của nó. Đọc về ban đầu
filter: invert(100%);
}

Hàm URL () lấy vị trí của tệp XML chỉ định bộ lọc SVG và có thể bao gồm neo vào một phần tử bộ lọc cụ thể. Thí dụ:

Bộ lọc: URL (SVG-URL#Element-ID)

ban đầu

Đặt thuộc tính này thành giá trị mặc định của nó. Đọc về ban đầu
filter: opacity(30%);
}

Hàm URL () lấy vị trí của tệp XML chỉ định bộ lọc SVG và có thể bao gồm neo vào một phần tử bộ lọc cụ thể. Thí dụ:

Bộ lọc: URL (SVG-URL#Element-ID)

ban đầu

Đặt thuộc tính này thành giá trị mặc định của nó. Đọc về ban đầu
filter: saturate(800%);
}

Hàm URL () lấy vị trí của tệp XML chỉ định bộ lọc SVG và có thể bao gồm neo vào một phần tử bộ lọc cụ thể. Thí dụ:

Bộ lọc: URL (SVG-URL#Element-ID)

ban đầu

Đặt thuộc tính này thành giá trị mặc định của nó. Đọc về ban đầu
filter: sepia(100%);
}

Hàm URL () lấy vị trí của tệp XML chỉ định bộ lọc SVG và có thể bao gồm neo vào một phần tử bộ lọc cụ thể. Thí dụ:

Bộ lọc: URL (SVG-URL#Element-ID)

ban đầu

Đặt thuộc tính này thành giá trị mặc định của nó. Đọc về ban đầu
filter: contrast(200%) brightness(150%);
}

Hàm URL () lấy vị trí của tệp XML chỉ định bộ lọc SVG và có thể bao gồm neo vào một phần tử bộ lọc cụ thể. Thí dụ:

Bộ lọc: URL (SVG-URL#Element-ID)

ban đầu

Đặt thuộc tính này thành giá trị mặc định của nó. Đọc về ban đầu
filter: blur(4px);
}

thừa kế
filter: brightness(0.30);
}

Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về kế thừa
filter: contrast(180%);
}

Nhiều ví dụ hơn
filter: grayscale(100%);
}

Ví dụ mờ
filter: hue-rotate(180deg);
}

Áp dụng hiệu ứng mờ cho hình ảnh:
filter: invert(100%);
}

img {& nbsp; bộ lọc: blur (5px);}
filter: opacity(50%);
}

Hãy tự mình thử »
filter: saturate(7);
}

Vệ tinh mờ 2
filter: sepia(100%);
}

Áp dụng hình nền mờ:
filter: drop-shadow(8px 8px 10px green);
}

Hàm URL () lấy vị trí của tệp XML chỉ định bộ lọc SVG và có thể bao gồm neo vào một phần tử bộ lọc cụ thể. Thí dụ:

Bộ lọc: URL (SVG-URL#Element-ID)

ban đầu

Đặt thuộc tính này thành giá trị mặc định của nó. Đọc về ban đầu

Làm thế nào để bạn tạo một hình ảnh màu xám trong HTML?

0% (0) là mặc định và biểu thị hình ảnh gốc.100% sẽ làm cho hình ảnh hoàn toàn màu xám (được sử dụng cho hình ảnh đen và trắng).100% will make the image completely gray (used for black and white images).

Làm thế nào để tôi màu xám một hình ảnh?

Thay đổi hình ảnh thành thang độ xám hoặc thành màu đen và trắng nhấp chuột phải hình ảnh mà bạn muốn thay đổi, sau đó nhấp vào Định dạng hình ảnh trên menu phím tắt.Nhấp vào tab Hình ảnh.Trong kiểm soát hình ảnh, trong danh sách màu, nhấp vào thang độ xám hoặc đen và trắng.Right-click the picture that you want to change, and then click Format Picture on the shortcut menu. Click the Picture tab. Under Image control, in the Color list, click Grayscale or Black and White.

Làm thế nào để bạn thêm một màu tối vào một hình ảnh trong HTML?

Hàm độ sáng () có thể được sử dụng làm giá trị để áp dụng hệ số nhân tuyến tính để làm cho nó có vẻ tối hơn hoặc sáng hơn so với bản gốc.Để làm cho hình ảnh tối hơn, bất kỳ giá trị nào dưới 100% đều có thể được sử dụng để làm tối hình ảnh theo tỷ lệ phần trăm đó.. To make an image darker, any value below 100% could be used to darken the image by that percentage.

Làm thế nào để bạn tạo ra một hình ảnh màu xám trong CSS?

Trong CSS, thuộc tính bộ lọc được sử dụng để chuyển đổi hình ảnh thành hình ảnh thang độ xám.Thuộc tính bộ lọc chủ yếu được sử dụng để đặt hiệu ứng trực quan của hình ảnh.Ví dụ 1: Trong ví dụ này, sử dụng Bộ lọc: GRAYSCALE (100%) để chuyển đổi hình ảnh thành thang độ xám.filter property is used to convert an image into grayscale image. Filter property is mainly used to set the visual effect of an image. Example 1: In this example, use filter: grayscale(100%) to convert an image into grayscale.

programming html Filter CSS Filter grayscale Hover gray color