CSS-常用样式-–-背景属性，web开发源码

最新推荐文章于 2024-08-22 16:10:15 发布

m_v_648374雨馨

最新推荐文章于 2024-08-22 16:10:15 发布

阅读量807

点赞数 20

分类专栏：前端程序员文章标签：前端 css javascript

本文链接：https://blog.csdn.net/m0_57509491/article/details/136768557

版权

前端程序员专栏收录该内容

9 篇文章 0 订阅

订阅专栏

水平方向可选单词：left、center、right
垂直方向可选单词：top、center、bottom
单词表示图片与盒子背景区域进行对应方向的对齐

background-position: right bottom; /* 对应方向对齐 */

②、像素表示法

使用像素值作为背景定位的属性值
第一个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点水平方向位移的距离
第二个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点垂直方向位移的距离

background-position: 50px 50px;

像素值区分正负，正负代表位移方向不同：

正数：表示图片针对盒子的原点向右、向下移动
负数：表示图片针对盒子的原点向左、向上移动

百分比表示法使用百分比数字作为属性值

100% 代表的数值：
水平方向，等价于盒子的 border 以内的背景区域宽度减去图片的宽度
垂直方向，等价于盒子的 border 以内的背景区域高度减去图片的高度

五、背景附着 background-attachment

属性名：background-attachment
作用：设置的是背景图片是否要随着页面或者盒子的滚动而滚动。属性值

六、综合写法 background

background 属性可以将五个单一属性的值进行合写
属性值：可以有 1-5 个属性值，值之间用空格进行分隔，背景定位的两个属性值算作一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置

body {
background: url(images/bj.jpg) no-repeat center top scroll #666;
}

注意事项：

①、如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载

background: pink;

②、如果想去层叠综合属性中的一部分，其他的属性保持不变，最好使用单一属性写法进行层叠

body {
background: url(images/bj.jpg) no-repeat center top #666;
background-attachment: scroll;
}

七、背景应用

①、替换插入图

h1 标签是权重最高的标签，一般会在内部书写最重要的内容，比如 logo 图片、最大的标题等
另外
内部的文字，可以帮助提高 SEO 搜索排名
在设置的是 logo 图片时，如果使用插入图，就不能书写搜索关键字

背景图替换插入图方法

如果想解决 SEO 问题，可以将 HTML 结构中，插入图换成搜索关键字，然后使用 css 添加背景图给标签或标签

Document

h1 {
width: 200px;
height: 100px;
}

h1 a {
display: block;
width: 200px;
height: 100px;
background: url(images/lagou_small.jpg) no-repeat;
}

今天|太阳|真好|666

文字隐藏方法

1、将字号设置为 0。IE8 及以上或高版本浏览器可以隐藏文字，但是 IE7 及以下有兼容问题

font-size: 0;

2、可以设置给标签一个 text-indent 属性，属性值为负的很大的值，文字会走到盒子外部，直接再设置溢出隐藏属性，将溢出文字隐藏

h1 a {
display: block;
width: 200px;
height: 100px;
background: url(images/lagou_small.jpg) no-repeat;
/* font-size: 0; */
text-indent: -20em;
overflow: hidden;
}

②、padding 区域背景图

在一个盒子中有背景图部分，而且有文字内容，文字会让开背景图区域进行加载，背景区域应该使用 padding 挤出位置
四个方向的 padding 都可能用于添加背景图

.list {
width: 300px;
padding-left: 10px;
border: 1px solid #000;
margin: 10px;
list-style: none;
font: 16px/32px “楷体”
}

.list li {
padding-left: 25px;
background: url(images/tubiao.png) no-repeat left center ;

}

③、精灵图技术

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）

css 精灵

CSS 精灵是一种处理网页背景图像的方式
它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来
通常情况下，这个由很多小的背景图像合成的大图被称为精灵图

css 精灵的技术依据

将网页中需要用到的小尺寸背景图制作成一张背景透明的 png 图片
利用背景定位技术，将精灵图的每个小图片加载到对应的标签上

制作精灵图的注意事项

精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放
精灵图的宽度取决于最宽的那个背景图片的标签宽度
精灵图可以横向摆放也可以纵向摆放，但是每个图片之间必须留够足够的空白，保证背景图片加载到一个标签内部时，不能出现多余内容
在精灵图的最底端，尽量留一点空白，方便以后添加其他精灵图

可以通过网上的在线进行制作精灵图

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！
面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！