导航:首页 > 图片大全 > 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格式如何改里面图片内容