CSS-常用样式-–-背景属性，开发8年的老前端才知道

2024-06-04 2130阅读

背景颜色

二、背景图片 background-image

属性名：background-image
作用：给盒子添加图片的背景修饰
加载范围：默认的加载到边框及以内部分。后期如果图片不重复加载，加载从 border 以内开始
属性值：url(图片路径)
url：uniform resource locator，统一资源定位符，小括号内部书写查找图片的路径
.box {
width: 200px;
height: 200px;
padding: 30px;
border: 5px dashed red;
margin: 20px;
/* background-color: slateblue; 背景颜色 */
background-image: url(https://blog.csdn.net/2401_84023579/article/details/images/lagouwang.jpg);
}
- 如果图片不重复，从 border 以内开始加载
- 背景图和背景颜色可以同时设置，背景图会压盖背景颜色，没有背景图的区域会显示背景颜色
  三、背景重复 background-repeat
  - 属性名：background-repeat
  - 作用：设置添加的背景图是否要在盒子中重复进行加载
  - 根据属性值不同，有四种重复加载方式
    | 属性值 | 作用 |
    | repeat | 重复，默认属性值，表示会使用背景图片重复加载填满整个盒子背景区域 |
    | no-repeat | 不重复，不论背景图是否大于盒子范围，都只加载一次图片 |
    | repeat--x | 水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复 |
    | repeat--y | 垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复 |
    
    .box {
    width: 200px;
    height: 200px;
    padding: 30px;
    border: 5px dashed red;
    margin: 20px;
    /* background-color: slateblue; 背景颜色 /
    background-image: url(images/lagou_small.jpg);
    / background-repeat: repeat; /
    / background-repeat: no-repeat; /
    / background-repeat: repeat-x; */
    background-repeat: repeat-y;
    }
    
    四、背景定位 background-position
    - 属性名：background-position
    - 作用：主要用于设置不重复的图片在背景区域的加载开始位置
    - 属性值：分为三种写法，单词表示法、像素表示法、百分比表示法。不论哪种写法
    - 属性值都有两个，值之间用空格分隔
    - 第一个属性值：表示背景图片在水平方向的位置
    - 第二个属性值：表示背景图片在垂直方向的位置
      ①、单词表示法
      - 属性值都是使用代表方向的单词进行书写
      - 水平方向可选单词：left、center、right
      - 垂直方向可选单词：top、center、bottom
      - 单词表示图片与盒子背景区域进行对应方向的对齐
        background-position: right bottom; /* 对应方向对齐 */
        
        ②、像素表示法
        
        使用像素值作为背景定位的属性值
        第一个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点水平方向位移的距离
        第二个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点垂直方向位移的距离
        background-position: 50px 50px;
        
        像素值区分正负，正负代表位移方向不同：
        
        正数：表示图片针对盒子的原点向右、向下移动
        负数：表示图片针对盒子的原点向左、向上移动
        百分比表示法使用百分比数字作为属性值
        
        100% 代表的数值：
        水平方向，等价于盒子的 border 以内的背景区域宽度减去图片的宽度
        垂直方向，等价于盒子的 border 以内的背景区域高度减去图片的高度
        五、背景附着 background-attachment
        
        属性名：background-attachment
        作用：设置的是背景图片是否要随着页面或者盒子的滚动而滚动。属性值
        | 属性值 | 说明 |
        | scroll | 滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走 |
        | fixed | 固定的，背景图的定位的参考点从盒子border 以内的左上顶点变为了浏览器窗口的左上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口的某个位置，不会随着页面滚动而滚走 |
        
        六、综合写法 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;
        }
        
        自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
        
        深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
        
        因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
        
        既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
        
        由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
        
        如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
        
        专业技能
        
        一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题
        
        HTML+CSS
        
        JavaScript
        
        前端框架
        
        前端性能优化
        
        前端监控
        
        模块化+项目构建
        
        代码管理
        
        信息安全
        
        网络协议
        
        浏览器
        
        算法与数据结构
        
        团队管理
        
        CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
        
        最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。
        
        其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等
        
        由于文章篇幅有限，仅展示部分内容
        
        
        
        一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
        
        AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算
        
        从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！**](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
        
        AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算