導航:首頁 > 圖片大全 > js如何把圖片變成灰色
js如何把圖片變成灰色
發布時間：2022-05-18 23:22:08Ⅰ 透明png圖片變灰色
ie6下png透明圖片的確為灰色,你添加如下js就可以了:function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (version < 7) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent("onload", correctPNG);
Ⅱ js css如何讓DIV背景圖片變暗。
需要准備的材料分別有：電腦、html編輯器、瀏覽器。
1、首先，打開html編輯器，新建html文件，例如：index.html，編寫問題基礎代碼。
Ⅲ js 實現背景圖片灰度
這個功能可以用CSS3 filter(濾鏡) 屬性 配合css的hover來使用，不需要js參與。
Ⅳ 求JS代碼，圖片在滑鼠滑過特定區域後改變顏色。
首先，灰色的圖片寫一個樣式，設置背景是灰色。例如.picGrey{background:grey;}，然後再寫一個粉色背景的樣式.picPink{background:pink}。
比如大圖的灰色圖片的ID是 pic1，然後滑鼠滑過粉色圖片的時候 $('#pic1').addClass("picPink")。說白了就是粉色樣式覆蓋灰色，就達到效果了。不明白的繼續問。希望能幫到您。
Ⅳ javascript如果讓頁面上的按鈕變灰（按鈕可見但不可用）
使用語句：document.getElementById("按鈕").setAttribute("disabled", true)即可。
1、設置一個html頁面，頁面上有一個按鈕，初始是可使用的。
Ⅵ 我用js寫了一個黑白條紋背景的div，用的是把背景變黑，然後margin-right補白。現在想變成黑白灰怎麼寫
弄一個DIV背景黑色，然後裡麵包含兩個子級DIV，這兩個DIV設置float:right屬性並列靠右，之前的DIV設置下寬度和高度。一個背景設置為白色，另一個背景設置為灰色，這就能黑白灰了
Ⅶ html div css為什麼我瀏覽器顯示的圖片沒有變成灰色
1、CSS Filter
使用CSS過濾器屬性可能是最簡單的方法把圖像變成灰度。以往,IE瀏覽器有一個專有的CSS屬性稱為過濾應用自定義效果包括灰度。
現在,過濾器屬性是CSS3規范的一部分,並支持在一些瀏覽器,Firefox、Chrome和Safari。以前,我們也提到Webkit過濾器,它不僅將圖像變成灰色也可以變成褐色和模糊效果。
添加如下CSS樣式可以將圖像變成灰色
代碼如下:
img {
-webkit-filter: grayscale(1);/* Webkit */
filter:gray;/* IE6-9 */
filter: grayscale(1);/* W3C */
}
支持IE6-9和Webkit瀏覽器(Chrome 18+, Safari 6.0+, and Opera 15+)
(注意:這段代碼在Firefox上無效果。)
2、Javascript
第二種方法是通過使用JavaScript技術上應該支持所有JavaScript的瀏覽器,包括IE6以下
代碼來自Ajax Blender.
代碼如下:
varimgObj = document.getElementById('js-image');
functiongray(imgObj) {
varcanvas = document.createElement('canvas');
varcanvasContext = canvas.getContext('2d');
varimgW = imgObj.width;
varimgH = imgObj.height;
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(imgObj, 0, 0);
varimgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
for(vary = 0; y < imgPixels.height; y++){
for(varx = 0; x < imgPixels.width; x++){
vari = (y * 4) * imgPixels.width + x * 4;
varavg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
returncanvas.toDataURL();
}
imgObj.src = gray(imgObj);
3、SVG
第三種方法來自SVG Filter.，你需要創建一個SVG文件,並將以下代碼寫在裡面，保存命名為***.svg
代碼如下:
<svgxm .w3.org/2000/svg">
<filterid="grayscale">
<feColorMatrixtype="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>
然後利用過濾器的屬性，我們可以通過SVG文件中的元素的ID連接SVG文件
[code]
img {
filter:url('img/gray.svg#grayscale');
}
Ⅷ 如何在javascript中讓一個鏈接變成灰色，不可點擊
直接試用disable不同瀏覽器及版本的兼容例外多,不建議直接disable超鏈接.
以下通過調整樣式和行為的方式實現上述需求:
定義一個超鏈接"變成"普通html文本的樣式
在某個行為中觸發"變灰"
在原鏈接的事件中加入如果已經有"變灰"的class則直接返回
在另外的行為中恢復"正常"
以下為模擬的代碼:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
<TITLE>NewDocument</TITLE>
<METANAME="Generator"CONTENT="EditPlus">
<METANAME="Author"CONTENT="">
<METANAME="Keywords"CONTENT="">
<METANAME="Description"CONTENT="">
<style>
/*"變灰"效果*/
.disableHref{
cursor:default;
color:#E5E0E0;
text-decoration:none;
}
</style>
<script>
//禁用超鏈接-"變灰"
functiondisableHref(){
varhrefDom=document.getElementById("testHref");
hrefDom.className+="disableHref";
}
//啟用超鏈接-"正常"
functionenableHref(){
varhrefDom=document.getElementById("testHref");
hrefDom.className=hrefDom.className.replace("disableHref","");
}
//超鏈接點擊事件
functionhrefClick(){
vartarget=event.target;
if(target.className.indexOf("disableHref")>-1){
//加入判斷,有"變灰"時返回
returnfalse;
}
//dosomethinguneed
//forexample
alert("jumpprevious");
}
</script>
</HEAD>
<BODY>
<ahref="javascript:;"id="testHref"onclick="hrefClick()"class="ttt">testhref</a>
<inputtype="button"id="btnDisableHref"onclick="disableHref()"value="Disablehref"/>
<inputtype="button"id="btnEnableHref"onclick="enableHref()"value="Enablehref"/>
</BODY>
</HTML>
與js如何把圖片變成灰色相關的資料
- 雞尾酒擺台圖片大全
- 手機如何拍攝鳥圖片
- 搜狐號圖片如何去水印
- 如何把一張圖片弄成微信背景
- 如何用手機把豎屏圖片變成橫屏的
- 西葯止咳葯大全圖片
- 抖音視頻如何自己添加圖片
- 勤儉節約漫畫圖片大全
- 玉的圖片大全
- 如何把可編輯圖片變成確定版
- ai如何提取圖片上的顏色
- 電腦如何將圖片和文件弄成壓縮包
- 如何把pdf轉換成圖片免費
- 各種貓咪圖片大全
- 手腕畫手錶圖片大全
- excel篩選時圖片如何不變
- 如何用紙做筆筒圖片
- 各種汽車卡通圖片大全
- 火鍋牆繪圖片大全
- 如何保存論文中的圖片
- 綠豆芽圖片大全大圖
- 手機釘釘圖片如何截圖
- 如何根據圖片確定分子式
- 楊冪吻戲合集圖片大全
- 如何找尋視頻動態中的圖片
- 機械設備如何粘貼操作規程的圖片
- 夏天馬路圖片大全
- 親吻老公的圖片大全
- 小客廳歐式沙發如何擺放圖片
- 如何導入圖片進行搜索
- 圖片如何與文檔模板融合
- 簡易木雕圖片大全
- 土冠越野車圖片大全
- 如何導入圖片上的顏色
- ppt格式如何改裡面圖片內容
- 現代紅木傢具圖片大全
- iphone如何接收隔空投送圖片
- 超市標志圖片大全
- ps如何將圖片增長
- 跑步壁紙圖片大全唯美
- 兒童蒙古畫圖片大全
- 和平精英圖片環境天氣如何