CSS进阶篇——背景图
Posted 老梁写代码
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS进阶篇——背景图相关的知识，希望对你有一定的参考价值。
我们知道，html 有一个 <img> 标签，可以用来展示图片，提高页面的丰富度。
CSS 的背景图片也有这个功能，但用法却截然不同。
body
background: white url(https://res.cloudinary.com/hefengcloud-com/image/upload/v1661790942/westlake/ping-hu-qiu-yue_g0brov.png) no-repeat top right;
上一篇我们介绍了属性的简写，这里的 background 也是简写，它可以拆解成：
background-color- 背景颜色background-image- 图片路径background-repeat- 图片的重复方式，取值包含：repeatrepeat-yrepeat-xno-repeat
background-position- 取值比较灵活，可以是top，center，bottom，left，也可以是长度值或者百分比，或者任何有意义的组合，比如top right。
已上属性是最常用的，也是最基本的，除此之外还有其他更高级的用法：
background-attachmentbackground-clipbackground-originbackground-size
background属性可应用于绝大部分 HTML 元素，除了最常用的<body>，还可以用于列表元素，甚至搜索框内展示图标也可以借此实现。
以上是关于CSS进阶篇——背景图的主要内容，如果未能解决你的问题，请参考以下文章
CSS进阶篇——简写属性 (shorthand properties)