1. HTML中我们用img标签插入图像,在Web中常用的有三种:JPEG, PNG,GIF。

简单来讲,JPEG适合照片和复杂图像使用,而PNG或GIF适合单色图像、logo、和几何图形使用。

  • JPEG:适合连续色调图像,如照片;可以表示1600万种不同颜色图像;“有损”格式,压缩时候会丢失信息;不支持透明度和动画;文件较小。
  • PNG:适合单色图像和线条构成的图像,如logo、剪贴画、图像中的小文本;可以表示上百万种颜色,PNG有三种,PNG-8、PNG-24、PNG-32;“无损        格式”,压缩时候不丢失信息;允许“透明”;文件比JPEG大一些,与GIF相比要根据使用的颜色数。
  • GIF:类似于PNG,适合单色图像和线条构成的图像,如logo、剪贴画、图像中的小文本;可以表示最多256种颜色;“无损”格式;只允许一种颜色设置      为“透明”;文件比JPEG大;支持动画。

2.<img src=".." alt="..">

<img>元素是一个内联元素,src属性指定图像文件的位置,alt属性是对图像的一个有意义的描述。

3.如果把一个透明的图像放在Web页面中,则要确保这个图形的蒙板颜色与Web页面的背景色一致。

Head First HTML与CSS — 为你的页面加图像的更多相关文章

  1. 【vue】css解决“防抖动”——防止页面加载图片抖动

    overflow:hidden;height:0;padding-bottom:*; // 其中*处填 图片的高宽百分比=高/宽*100%

  2. asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度

    介绍 使用许多小得JS.CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维 护性,这是一个很好的实践.但这样做反过来却损失了网站的性能.虽然你应该将你的Javascript代码写在小文件中 ...

  3. 加载 CSS 时不影响页面渲染

    转自:http://www.oschina.net/translate/loading-css-without-blocking-render 本文展示了一种技术,它能通过异步下载样式表,以阻止它们的 ...

  4. nginx实现动态分离,解决css和js等图片加载问题

    改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...

  5. 判断脚本,图片,CSS,iframe等是否加载完成

    1.图片 <img id="MyImg" src="src"/>jquery实现:$("#MyImg").load(functi ...

  6. css 实现页面加载中等待效果

    <!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title> <meta ...

  7. 利用css实现页面加载时旋转动画

    有时浏览一些网站时在刚加载页面时候会出现一个滚动动画如下图,特别是对于一些移动端的站点或者混合应用来说应该用户体验会好很多,扒了下页面发现是用css样式控制的,于是把页面以及css样式赋值了下来, h ...

  8. SpringMvc架构下css、js、jpg加载失败问题

    SpringMvc架构下css.js.jpg加载失败问题 springMvc搭建成功后,页面出现一些错误,jsp.js等静态资源加载失败.导致页面没有显示任何样式以及 此处原因很简单,是因为相对路径在 ...

  9. 关于html,css,js三者的加载顺序问题

    <head lang="en"> <meta charset="utf-8"> <title></title> ...

随机推荐

  1. Skin++ 皮肤库 CCheckListBox MFC 界面风格

    今天使用CCheckListBox,发现增加进去的字符串无法显示,但是当点击的时候,确有反应. 仔细检查代码,没有问题.之前也是这样用的,完全没有问题. 思前想后,觉得是因为使用了Skin++皮肤库, ...

  2. DSP TMS320C6000基础学习(6)—— gel文件

    什么是gel文件?gel文件能干什么? gel全称General Extended Language,即通用扩展语言文件,gel文件中由类似C语言的代码构成,gel语言是一种解释性语言,gel文件扩展 ...

  3. @NotNull丶@NotBlank丶@NotEmpty

    1.@NotNull:不能为 Null,但是可以为Empty:用在基本数据类型上. @NotNull(message="{state.notnull.valid}", groups ...

  4. CentOS下安装nginx并且升级nginx到最新版

    yum install yum-fastestmirro yum install nginxyum update nginx(之前先配置一下)vim /etc/yum.repos.d/nginx.re ...

  5. RequireJS学习笔记(转)

    前言 进入移动前端是很不错的选择,这块也是我希望的道路,但是不熟悉啊... 现在项目用的是require+backbone,整个框架被封装了一次,今天看了代码搞不清楚,觉得应该先从源头抓起,所以再看看 ...

  6. IIS7.5 APPCMD 简单用法及示例

    1 添加应用程序进城池 appcmd.exe add apppool  /name:test.com  /managedRuntimeVersion:"v4.0" /managed ...

  7. jdk8永久代从方法区移除的验证

    /*** 测试使用jdk8中是否仍然可以使用永久代* jvm options * -Xms20m -Xmx20m -Xmn10m -XX:PermSize=10m -XX:MaxPermSize=10 ...

  8. 复杂事件处理引擎—Esper参考(事件部分)

    声明:Esper官方未提供中文文档,以后更新的大部分内容,均来自官方文档.本人英语小白一枚,翻译内容仅供参考.有些翻译确实不忍直视,君可略过. (有人可能会说,翻译的不好不如不翻,可能会误人子弟:不过 ...

  9. Unix和Linux下C语言学习指南

    转自:http://www.linuxdiyf.com/viewarticle.php?id=174074 Unix和Linux下C语言学习指南 引言 尽管 C 语言问世已近 30 年,但它的魅力仍未 ...

  10. 安卓各文件存储路径汇总(Android file path)

    写下来,省得以后不记得到处翻: Environment.getDataDirectory() = /data Environment.getDownloadCacheDirectory() = /ca ...