HTML中的图片

2019-07-12 admin

HTML中的图片

< img src="">

图片的三种格式

JPG

  1. JPG适合照片,包含一千六百多种颜色,这是一种有损格式,因为照片缩小时会丢掉图像的一些信息
  2. 不支持透明度
  3. 文件比较小
  4. 不支持动画

PNG

  1. PNG支持上百种颜色,的图像。PNG有三种:<blockquote>

PNG-8,PNG-24,PNG-32 </blockquote> <p>取决于你需要表示多少种颜色。 </p>

  1. 这是一种无损格式
  2. 允许将颜色设置为“透明”,使图像下面的东西显示出来
  3. PNG文件的大小取决于颜色的多少

GIF

  1. gif图支持256种颜色
  2. 是一种“无损”格式
  3. 也可以设置透明度,但是只支持将一种颜色设置为“透明”
  4. GIF文件一般比JPEG文件大
  5. 支持动画——三种格式里唯一支持动画的

总结: gif,png适合做小文本和logo图,JPEG适合照片 **

< img src="" alt="" width="" height="">

其中src表示图片地址,alt表示图片未被加载时显示的替代文字,width表示图片宽度,htight表示图片高度

最好不要用width和height控制图片大小,因为这样在获取网页资源的时候还是要加载原来的图片的,建议用ps调下分辨率再加载进去

如果想要将图片设置为跳转则在img标签嵌套在a标签内就可以了 **

蒙版

蒙版即根据背景颜色柔滑文本边缘的一种效果,一般用于透明背景图片

** 如果把一个透明呢的图片放在web页面中,则要确定这个图像的蒙版颜色与web页面的背景色一致。 透明图像可以使用PNG或GIF格式

[转载]原文链接:https://segmentfault.com/a/1190000019744459

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69580.html

文章标题:HTML中的图片

相关文章
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
canvas图片绘制跨域问题解决方案Tainted canvases may not be exported
图片跨域问题的一般解决方法 当使用canvas绘制网络图片的时候,经常会出现“Tainted canvases may not be exported”报错,上网搜一下解决方案,应该给的都是给img添加crossOrigin属性,尝试了一下...
2018-04-19
HTML5究竟会火到什么地步
这已经是第N次,HTML5火热了起来,这次的火热是否可以延续? H5的最大优势就是可以在网页上直接调试和修改,而且更重要的是,它几乎不用考虑用户的机型与适配性问题。智能手机主要被分裂为两大系统:Android和iOS,一个做应用的团队,怎么...
2015-11-12
HTML5这次的火热是否又是昙花一现?
即使你不是技术控,你也应该感受到过去一年时间身边发生的HTML5事件,去年由微信朋友圈引爆的《围住神经猫》以及之后一系列的小游戏,都证明了HTML5的营销价值。 HTML5已经出来很多年了,HTML5是一个基于浏览器的协作标准,可以让各种不...
2015-11-12
纯JS实现旋转图片3D展示效果
CSS: &lt;style type=&quot;text&#x2F;css&quot;&gt; #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
HTML5游戏2015年的开发趋势
在互联网行业中,一个行业从零到成熟,开发者生态也是对应的,我们今年看到很多大公司,包括像微软和Google,也参与到了HTML5 开发者生态的建设当中。关于HTML5移动游戏的开发和盈利生态的走向又该去往何处?下面我们来试着讨论一下。 《围...
2015-11-12
Html5 是否适合移动应用开发
HTML5最近这几年声誉鹊起,而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边,都不好意思和客户打招呼!移动应用开发中,HTML5更是不可或缺的角色,市面上不少移动应用中间件产品都号称支持HTML5,例如APP...
2015-11-12
HTML5手机游戏大爆发
HTML5技术的应用从未像今天如此火爆,从手游领域蔓延至整个移动互联网,从创业公司掘金到巨头深度介入。HTML5正推动移动互联网发展新趋势的诞生,引领未来投资的风向标,围绕HTML5创业的黄金时代即将到来。 追根溯源,HTML5手游之所以备...
2015-11-12
回到顶部