css3應用之黑白圖片處理

原創 iteye_2245 2018-09-06 02:52

其實在前面的一篇介紹-webkit-filter的文章中簡單地提了一下。

 

我們可以設置灰度來對圖片進行處理。

 

 

.test{
   -webkit-filter:grayscale(100%);
}
 

 

IE下面我們可以設置

 

filter:gray

 

 

 

 

擴展閱讀：

 

http://www.zhangxinxu.com/wordpress/?p=2547

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

用CSS3實現一個圖形

一、實現一個三角形 HTML:<div class="block"></div> CSS： .block{ width:0; height:0; border-right:50px solid transparent;

柳时镇大尉 2020-07-07 10:30:07

不知道取個啥名（CSS翻轉，transform）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-

ddx2019 2020-07-08 11:55:42

設置陰影box-shadow與text-shadow

box-shadow屬性可以設置一個或多個下拉陰影的框 語法 box-shadow: h-shadow v-shadow blur spread color inset; 注意：boxShadow 屬性把一個或多個下拉陰影添加到

麻陌 2020-07-08 11:50:38

我實現了客戶要求的五彩斑斕的黑！！！

五彩斑斕的黑？？？？五彩斑斕？？？還黑？？之前只是笑笑就過去了。。那麼能不能實現呢，，，今天他來了！！！ 效果圖:展示出來的效果顏色和光暈的顏色都是用c3寫成的動畫效果，由於不支持上傳視頻，就截了幾幀的圖片，有想要自己實現這個動畫

SC前端 2020-07-08 10:39:04

HTML+css做炫酷的3d盒子反轉

3d盒子反戰 效果如圖如下： HTML重要的代碼如下： <ul> <li> <div class="box"> <div class="front">目錄

文情战 2020-07-08 09:12:55

CSS實現button按鈕閃爍效果

最近有個奇葩需求，我們客戶要求按鈕要像星星一樣一閃一閃的！！！.......... <el-button type="success" class="flash animated infinite">按鈕</el-button> .

橘猫猫猫猫丶 2020-07-08 04:09:33

常用垂直居中的方法

嵌套盒子垂直居中 公共代碼部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w

未了丶 2020-07-08 03:43:31

flex彈性盒模型及flex-grow與flex-shrink的計算

一、Flex 佈局是什麼？ Flex 是 Flexible Box 的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。 任何一個容器都可以指定爲 Flex 佈局。 .box{ display: flex; } 行內元

Neal__caffreal 2020-07-07 22:25:48

html 編寫模板

  <!doctype html> <html> <head> <!--聲明當前頁面的編碼集：charset=gbk,gb2312(中文編碼)，utf-8國際編碼-->

潇凝子潇 2020-07-07 15:51:45

利用css3的幾種提示效果

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> <meta na

望月归乡 2020-07-07 14:36:15

ehcarts line先從折線變弧線

屬性值 smooth: true 要的是這種效果, 一般我們組合的時候的圖是這樣的 所以需要設置一下 修改 series: [ { name: '蒸發量',

hjy170314 2020-07-07 14:20:57

transform在css中的巧用

未知高度下的垂直居中 top: 50%; transform: translateY(-50%); 線條動畫： 由中間向兩邊散開 left: 50%; transform: translateX(-50%);

晓鱼仔 2020-07-07 10:47:14

flex佈局及常用屬性

1、flex-direction屬性（） flex-direction: row | row-reverse | column | column-reverse row（默認值）：主軸爲水平方向，起點在左端 row-reve

情非得已小猿猿 2020-07-07 07:31:20

使用CSS3的@font-face實現個性化字體

在網頁中，我們可以用CSS的font-family屬性來定義字體，然而定義的字體在用戶的電腦上能否正確呈現則要看用戶的電腦是否安裝了該字體。我們經常能看到國外的一些個人網站使用了非常漂亮的字體，而這些字體通常在用戶的電腦中是沒有安裝的，

抱猫睡觉的鱼 2020-07-07 06:33:29

你不知道的HTML中input新增表單屬性二十項？（97）

 type類型新增和原來的屬性如下： 屬性值 值             描述         button             定義可點擊的按鈕（大多與 JavaScript 使用來啓動腳本）         checkbox   

前端邢 2020-07-07 06:08:04