解决在网页上显示PNG图片底色不透明的方法
| 来源: 网易博客 | 类别: 编程 | 作者: 阿拉蕾 | 发布时间: 2009-9-7 22:09:18 |
很多时间,我们需要在网页上插入一些没有底色,只有轮廓的图片,而常用的底色透明的图片的有GIF和PNG,如果用GIF的话,底色透明后,轮廓边缘会变得很粗糙,只有用PNG,但是PNG插入到网页后,底色却不能变透明,怎么办呢?使用以下JS和CSS代码就可以解决这个问题:
JS代码
function displayPng() { 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="/" mce_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", displayPng);
把上述代码写在<javascript></javascript>之间
CSS代码
<img src="aaa.png" mce_src="aaa.png" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/index.png'); />
解决在网页上显示PNG图片底色不透明的方法相关推荐
- html引入png不显示透明北京,解决在网页上显示PNG图片底色不透明的方法
来源: 网易博客 类别: 编程 作者: 阿拉蕾 发布时间: 2009-9-7 22:09:18 很多时间,我们需要在网页上插入一些没有底色,只有轮廓的图片,而常用的底色透明的图片的有GIF和PNG,如 ...
- 怎么在html页面中加入图片不显示,html – 如何在网页上显示本地图片？
您可以使用FileReader.readAsDataURL()轻松地执行此操作.用户选择图像,您可以显示它,而无需上传它. 这是代码: function previewFile() { // Wher ...
- 图片的base64编码实现以及网页上显示
生成.解析base64编码的图片 //图片转化成base64字符串 public static String GetImageStr(<span style="font-family: ...
- Python将图片转化为base64编码以及如何在html网页上显示
1.Python将图片转化为base64编码 test.py # -*- coding: utf-8 -*- import base64 #这一段代码时间图片转化为base64 with open(& ...
- html中加入emjio表情,html网页上显示emoji表情
前言 做项目涉及表情在网页上显示.稍微研究了一下实现方案,整体思路不复杂,就是稍微涉及到一些新概念和新方法. 精灵图 精灵图又称雪碧图,简单来说就是一种把很多小图片拼成一张大图的图片形式.下图就是表情 ...
- 3D模型在网页上显示
3D模型在网页上显示,这绝对是未来的趋势,也是热门.一部"阿凡达"让电影节发生了一次地震,让人们感到3D的时代到来.那么我们IT界呢?如果各位因工作时间繁忙,或者嫌上海世博会人山人 ...
- HTML之如何在你的网页上放小姐姐图片
是我,我又来了( ゜- ゜)つロ 今天来教大家如何在自己的网页上放小姐姐图片,是不是非常期待呢 废话不多说了,直接讲标签 图片 img标签用于在网页中放置图片 <img src="&q ...
- 基于ZYNQ的网页上传BMP图片至HDMI端口输出实例
目录 Change Log 0 前言 0.1 系统实现 0.2 源码下载 0.3 项目信息 1 ZYNQ开发板HDMI输出BMP图片功能:FPGA相关 1.1 系统框图 1.2 RTL图 1.3 Bl ...
- 解决Chrome网页编码显示乱码的问题
解决Chrome网页编码显示乱码的问题 记得在没多久以前,Google Chrome上面出现编码显示问题时,可以手动来调整网页编码问题,可是好像在Chrome 55.0版以后就不再提供手动调整编码 ...
最新文章
- 人的幸福感取决于什么
- ppt生成器_9款魔性#傻瓜生成器#，上班可以划水一天
- 锁底层之内存屏障与原语指令
- OC中property的有关属性
- FreeRTOS源码分析与应用开发01：中断配置与临界段
- 【每日一题】Leetcode 刷题 二叉树-树的遍历 介绍
- 通俗理解数字签名，数字证书和https
- Delphi程序结构
- [转] linux 下查看一个进程运行路径的方法
- 小程序-Hello World
- 二手笔记本电脑电池测试软件,笔记本电池修复软件Battery Doubler V1.2.1免费已注册版...
- 淘宝定时任务 tbschedule实战
- KDD 2022论文合集（持续更新中）
- 计算机萌新适合学安卓,老学姐呕心沥血整理的大学必备的软件！萌新赶紧收藏...
- linux ftp查看列表命令,linux查询ftp命令
- OpenBSD6.3系统安装记录
- [转]用天文方法计算日月合朔（新月）
- 双显示器扩展怎么设置上下扩展
- 错失英语，还是想错失另一个世界？
- 三个一工程比较有意思的题汇总
热门文章
- 价格战的关键，非“锂”莫属
- 计算机系统实验拆炸弹,CSAPP 炸弹实验解析上
- 2012年第二季度惠普PC销量下滑严重，联想大幅增长25.2%逼近惠普
- 羽毛球线选择--BG65，BG80，BG65Ti，NBG 95
- 石家庄独特的地理位置容易出现雾霾天气
- 悄悄地上线了 | 研学分享 | 的官网~
- 【Mimic】《Mimicking Very Efficient Network for Object Detection》
- 人体测温 melexis迈来芯 linux 平台mlx90614/mlx90621/mlx90641驱动调试
- 如何做一个基于微信健身房私教预约小程序毕业设计毕设作品
- mac电脑屏幕护眼颜色_如何反转Mac屏幕的颜色