1.背景控制的常用属性
| 属性 | 描述 | 示例用法 |
|---|---|---|
| background-color | 添加背景颜色 | background-color:red; |
| background: linear-gradient(); | 背景渐变 | background: linear-gradient(red, 30%, blue); |
| background-image | 添加背景图片 | background-image: url(“路径”); |
| background-repeat | 设置是否及如何重复背景图像 | background-repeat: no-repeat; |
| background-position | 背景定位 | background-position: center right; |
| background-size | 定义背景大小 | background-size: contain; |
| box-shadow | 背景阴影 | box-shadow: 5px 10px 5px #888888; |
| border-radius | 背景圆角 | border-radius: 50%; |
- 示例1背景颜色
<style>div {width: 300px;height: 300px;border: 1px solid black;background-color: chartreuse;}</style>
如图
- 示例2背景颜色渐变
background: linear-gradient(red, 30%, blue);/* 基础线性渐变 */
如图
- 示例3改变渐变方向
background: linear-gradient(to right, blue, pink); /* 向右渐变 *//*默认情况下，默认情况下，线性渐变的方向是从上到下， 你可以指定一个值来改变渐变的方向*/
如图
示例4添加背景图片
background-image: url("路径");
如图
示例5背景图片不重复显示
background-repeat: no-repeat;/*背景图片不重复显示*/
- 示例6背景定位
background-position: center;
- 示例7定义背景大小
background-size: 60%;
- 示例7背景阴影
box-shadow: 5px 10px 5px #888888;
- 示例8背景圆角
border-radius: 50%;
2精灵图
- 1.原理:
把网页中的一些背景图片整合到一张图片文件中, 利用backgroun-position等属性进行背景定位 - 2.优缺点
优点:
减少http请求, 加快网页的加载速度, 提高用户体验
减少图片的体积, 减少字节数
解决设计师图片命名的烦恼
更换风格方便
缺点:
开发时需要测量, 比较繁琐
维护的时候麻烦
精灵图不能随意改变大小和位置
宽屏高分辨率的屏幕下, 容易出现背景断裂
示例
<style>.div1 {width: 400px;height: 600px;border: 1px solid #000;background: url(tb.png) no-repeat;background-position: -128 -44;}.div2 {width: 113px;height: 113px;background: url(tb.png) no-repeat;background-position: -44px -16px;}.div3 {width: 113px;height: 113px;background: url(tb.png) no-repeat;background-position: -239px -274px;}</style></head><body><div class="div1"></div><div class="div2"></div><div class="div3"></div></body>
如图
3.阿里字体图标
2.选择需要的图标，添加到项目，下载到本地，阿里云字体图标在项目中有三种引用方式 我们推荐使用第一种引用方式，因为第一种引用方式的兼容性很好
3.
如图
注：示例中的代码复制后，请把路径更改为正确的路径，否则会找不到文件