文章目录
img 图片标签
DOCTYPE html>
图片标签
1. 说明 2. 属性
3. 补充
DOCTYPE html>
.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;
}
1. png24 图片问题 在 IE6 中，对图片格式 png24 的支持度不高如果使用的图片格式是 png24，则会导致透明效果无法正常显示 2. 解决方法： 可以使用 png8 来代替 png24，即可解决问题， 使用 来解决该问题，需要向页面中引入一个外部的 文件
相对路径
DOCTYPE html>
相对路径
相对路径值相对于当前资源所在目录的位置
1. src属性 src属性配置的是图片的路径，目前我们所要使用的路径全都是相对路径
可以使用…/来返回一级目录,返回几级目录就写几个…/
2. 相对路径的图片
图片的格式
图片的使用原则
背景 背景样式和背景图片重复方式
DOCTYPE html>
.box1 {
width: 1024px;
height: 724px;
margin: 0 auto;
/*设置背景样式*/
background-color: #bfa;
background-image: url(img/1.png);
background-repeat: repeat-y;
}
<p>
</p>
1. 背景样式
/设置背景样式/
background-color: #bfa;
2. 背景图片
-image 来设置背景图片
语法：-image:url(相对路径); 可以同时为一个元素指定背景颜色和背景图片，
background-image: url(img/1.png);
3. 背景图片的重复方式 - 用来设置背景图片的重复方式可选值：
background-repeat: repeat-y;
背景图片的定位
DOCTYPE html>
* {
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; */
<p>![css重复动画_红米手机出现重复图标_css图标重复][6]
background-attachment: fixed;
}
body {
background-image: url(img/3.png);
background-repeat: no-repeat;
background-attachment: fixed;
}
</p>
1. 背景的定位 1. 说明 背景图片默认贴着元素的左上角显示通过 - 可以调整背景图片在元素中的位置 2. 可选值 该属性可以使用 top right left 中的两个值来指定一个背景图片的位置 如果只给出一个值，则第二个值默认是
也可以直接指定两个偏移量
第一个是水平偏移量
第二个是垂直偏移量
background-position: -80px -40px;
2. 背景图片跟随滚动
- 用来设置背景图片是否随着页面一起滚动
可选值： - ,默认值，背景图片随着窗口滚动 - fixed，背景图片会固定在某一位置，不随页面滚动
不随窗口滚动的图片，我们一般都设置给 bodycss图标重复 web前端-html，而不设置给其他元素
当背景图片的 - 设置为 fixed 时，
background-attachment: fixed;
背景简写
DOCTYPE html>
body {
background-color: #bfa;
background: #bfa url(img/3.png) center center no-repeat fixed;
}
1. 分开写背景的各个样式
/ 设置一个背景颜色 /
/background-color: #bfa;
/*设置一个背景图片 */
background-image: url(img/3.png);
/* 设置背景不重复 */
background-repeat: no-repeat;
/*设置背景图片的位置*/
background-position: center center;
/*设置背景图片不随滚动条滚动 */
background-attachment: fixed;
2. 简写 通过该属性可以同时设置所有相关的样式没有顺序的要求，谁在前谁在后都行
background: #bfa url(img/3.png) center center no-repeat fixed;
雪碧图(精灵图)
DOCTYPE html>
.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;
}
<p>![css图标重复_css重复动画_红米手机出现重复图标][9]
</p>
link状态:
hover状态：
状态：
1. 问题说明 做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的用户体验。 2. 产生闪烁问题的原因： 背景图片时以为外部资源的形式加载进网页的，浏览器没加载一个外部资源就需要单独的发送一次请求， 我们这个练习，一上来浏览器只会加载 link.png 由于 hover 和 状态没有马上触发， 当 hover 被触发时，浏览器才去加载 hover.png当 被触发时css图标重复，浏览器才去加载 .png
由于加载图片需要一定的时间，所以在加载和显示的过程中会有一段时间背景图片无法显示，导致出现闪烁的情况
3. 雪碧图(精灵图)说明 为了解决该问题，我们可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载css图标重复，就不会出现闪烁的问题了然后通过 - 来切换要显示的图片的位置，这种技术叫做图片整合技术，(CSS-)优点 4. 利用雪碧图(精灵图)的练习
代码：
DOCTYPE html>
.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;
}
原雪碧图:
页面展示：
文章来源:https://blog.csdn.net/weixin_64933233/article/details/127980123