文章目录
img 图片标签
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>图片标签</title></head><body><imgsrc="2.gif"alt="这是一个大松鼠"width="100px"height="500px"/></body></html>
1. 说明
- 使用 img 标签来引入一个外部图片
- img 标签也是一个自结束标签
2. 属性
- src:设置一个外部图片的路径
- alt:可以用来设置在图片不能显示时,对图片的描述 > 1.搜索引擎可以通过 alt 属性来识别不同的图片> 2.如果不写 alt 属性,则搜索引擎不会对 img 中的图片进行收录
- width:可以用来修改图片的宽度,一般使用 px 作为单位
- height:可以用来修改图片高度 > 1.宽度和高度如果只设置一个,另一个也会等比例调整大小> 2.如果两个值同时指定则按照你指定的值来设置> 3.一般开发中除了自适应的页面,不建议设置 width 和 height
<imgsrc="1.gif"alt="这是一个大松鼠"width="100px"height="500px"/>
3. 补充
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><styletype="text/css">.box1{width: 200px;height: 200px;background-image:url(img/3.png);background-repeat: no-repeat;}.box2{width: 200px;height: 200px;background-image:url(img/4.png);background-repeat: no-repeat;}</style></head><bodystyle="background-color: #bfa;"><divclass="box1"></div><divclass="box2"></div><imgsrc="img/3.png"/><!-- 在body标签的最后引入外部的JS文件 --><!-- 以下代码只会在IE6中执行,其他浏览器中无效 --><!--[if IE 6]>
<script
type="text/javascript"
src="js/DD_belatedPNG_0.0.8a-min.js"
></script>
<script type="text/javascript">
Dd_belatedPNG.fix("*");
</script>
<![endif]--></body></html>
1. png24 图片问题
- 在 IE6 中,对图片格式 png24 的支持度不高
- 如果使用的图片格式是 png24,则会导致透明效果无法正常显示
2. 解决方法:
- 可以使用 png8 来代替 png24,即可解决问题, - 但是使用 ong8 代替 png24 以后,图片的清晰度会有所下降
- 使用 JavaScript 来解决该问题,需要向页面中引入一个外部的 JavaScript 文件 - 然后再写一下简单的代码,来处理该问题
<!-- 以下代码只会在IE6中执行,其他浏览器中无效 --><!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
Dd_belatedPNG.fix("*");
</script>
<![endif]-->
相对路径
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>相对路径</title></head><body><imgsrc="2.gif"alt="这是一个大松鼠"/></body></html>
相对路径值相对于当前资源所在目录的位置
1. src属性
- src属性配置的是图片的路径,目前我们所要使用的路径全都是相对路径
<imgsrc="abc/bcd/2.gif"alt="这是一个大松鼠"/>
- 可以使用…/来返回一级目录,返回几级目录就写几个…/
<imgsrc="../../img/2.gif"alt="这是一个大松鼠"/>
2. 相对路径的图片
- 图片的格式- JPEG(JPG) 1. JPEG图片支持的颜色比较多,图片可以压缩,但是它不支持透明2. 一般使用JPEG来保存照片等颜色丰富的颜色- GIF 1. GIF支持的颜色少,只支持简单的透明,支持动态图2. 图片颜色单一或者是动态图时可以使用gif- PNG 1. PNG支持的颜色多,并且支持复杂的透明2. 可以用来显示颜色复杂的透明图片
- 图片的使用原则- 效果不一致,使用效果好的- 效果一致,使用小的
背景
背景样式和背景图片重复方式
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><styletype="text/css">.box1{width: 1024px;height: 724px;margin: 0 auto;/*设置背景样式*/background-color: #bfa;background-image:url(img/1.png);background-repeat: repeat-y;}</style></head><body><divclass="box1"></div></body></html>
1. 背景样式
/*设置背景样式*/background-color: #bfa;
2. 背景图片
background-image 来设置背景图片
- 语法:background-image:url(相对路径); - 如果背景图片大于元素,默认会显示图片的左上角- 如果背景和元素一样大,则会将背景图片全部显示- 如果背景元素小于元素大小,则会默认将背景图片平铺以充满元素
- 可以同时为一个元素指定背景颜色和背景图片, - 这样背景样式将会作为背景图片的底色- 一般情况下设置背景图片时都会同时指定一个颜色
background-image:url(img/1.png);
3. 背景图片的重复方式
- background-repeat 用来设置背景图片的重复方式
- 可选值: - repeat,默认值,背景图片会双重复(平铺)- no-repeat,背景图片不会重复,有多大就显示多大- repeat-x,背景图片沿水平方向重复- repeat-y,背景图片沿垂直方向重复
background-repeat: repeat-y;
背景图片的定位
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><styletype="text/css">*{margin: 0;padding: 0;}.box1{height: 500px;margin: 0 auto;/*
* 设置一个背景
*/background-color: #bfa;/*
* 设置一个背景图片
*/background-image:url(img/4.png);/*
* 设置一个图片不重复
*/background-repeat: no-repeat;/* background-position: -80px -40px; */background-attachment: fixed;}body{background-image:url(img/3.png);background-repeat: no-repeat;background-attachment: fixed;}</style></head><bodystyle="height: 5000px;"><divclass="box1"></div></body></html>
1. 背景的定位
1. 说明
- 背景图片默认贴着元素的左上角显示
- 通过 background-position 可以调整背景图片在元素中的位置
2. 可选值
- 该属性可以使用 top right left bottom center 中的两个值来指定一个背景图片的位置 - top left 左上- bottom right 右下
- 如果只给出一个值,则第二个值默认是 center
也可以直接指定两个偏移量
- 第一个是水平偏移量- 如果指定的是一个正值,则图片向右移动指定的像素- 如果指定的是一个负值,则图片向左移动指定的像素
- 第二个是垂直偏移量- 如果指定的是一个正值,这图片向下移动指定的像素- 如果指定的是一个负值,则图片向上移动指定的像素
background-position: -80px -40px;
2. 背景图片跟随滚动
- background-attachment 用来设置背景图片是否随着页面一起滚动
- 可选值: - scroll,默认值,背景图片随着窗口滚动 - fixed,背景图片会固定在某一位置,不随页面滚动> 不随窗口滚动的图片,我们一般都设置给 body,而不设置给其他元素
- 当背景图片的 background-attachment 设置为 fixed 时,- 背景图片的定位永远相对于浏览器的窗口
background-attachment: fixed;
背景简写
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><styletype="text/css">body{background-color: #bfa;background: #bfa url(img/3.png) center center no-repeat fixed;}</style></head><body></body></html>
1. 分开写背景的各个样式
/* 设置一个背景颜色 */
/background-color: #bfa;/*设置一个背景图片 */background-image:url(img/3.png);/* 设置背景不重复 */background-repeat: no-repeat;/*设置背景图片的位置*/background-position: center center;/*设置背景图片不随滚动条滚动 */background-attachment: fixed;
2. 简写 background
- 通过该属性可以同时设置所有相关的样式
- 没有顺序的要求,谁在前谁在后都行 - 也没有数量的要求,不写的样式就使用默认值
background: #bfa url(img/3.png) center center no-repeat fixed;
sprite雪碧图(精灵图)
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><styletype="text/css">.btn:link{/*将a转换为块元素*/display: block;/*设置宽高*/width: 93px;height: 29px;/*设置背景图片*/background-image:url(img/btn/btn.png);/*设置背景颜色不重复*/background-repeat: no-repeat;}.btn:hover{/*
* 当是hover状态时,希望图片可以向左移动
*/background-position: -93px 0;}.btn:active{/*
* 当是active状态时,希望图片可以再向左移动
*/background-position: -186px 0;}</style></head><body><!-- 创建一个超链接 --><aclass="btn"href="#"></a></body></html>
link状态:
hover状态:
active状态:
1. 问题说明
- 做完功能以后,发现在第一次切换图片时,会发现图片有一个非常快的闪烁,
- 这个闪烁会造成一次不佳的用户体验。
2. 产生闪烁问题的原因:
- 背景图片时以为外部资源的形式加载进网页的,浏览器没加载一个外部资源就需要单独的发送一次请求, - 但是我们的外部资源不是同时加载的,浏览器只有在资源被使用的时候才回去加载资源
- 我们这个练习,一上来浏览器只会加载 link.png 由于 hover 和 active 状态没有马上触发, - 所以 hover.png 和 active.png 并不是立即加载的
- 当 hover 被触发时,浏览器才去加载 hover.png
- 当 active 被触发时,浏览器才去加载 active.png > 由于加载图片需要一定的时间,所以在加载和显示的过程中会有一段时间背景图片无法显示,导致出现闪烁的情况
3. sprite雪碧图(精灵图)说明
- 为了解决该问题,我们可以将三个图片整合为一张图片,这样可以同时将三张图片一起加载,就不会出现闪烁的问题了
- 然后通过 background-position 来切换要显示的图片的位置,这种技术叫做图片整合技术,(CSS-Sprite)
- 优点 - 将多个图片整合为一张图片里,浏览器只需要发送一次请求,可以同时加载多个图片,提高了访问的效率,提高了用户的体验。- 将多个图片整合为一张图片,减小了图片的总大小,提高了请求的速度,增加了用户体验
4. 利用雪碧图(精灵图)的练习
代码:
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">.box1{width: 129px;height: 45px;background-image:url(img/amazon-sprite_.png);}.box2{width: 42px;height: 30px;background-image:url(img/amazon-sprite_.png);/*
* 设置偏移量
*/background-position: -58px -338px;}</style></head><body><divclass="box1"></div><divclass="box2"></div></body></html>
原雪碧图:
页面展示:
本文转载自: https://blog.csdn.net/weixin_64933233/article/details/127980123
版权归原作者 王十四兄 所有, 如有侵权,请联系我们删除。
版权归原作者 王十四兄 所有, 如有侵权,请联系我们删除。