博主信息

博文 11

粉丝 0

访问量 10644

专题推荐

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.阿里字体图标

1.登录阿里字体图标官网https://www.iconfont.cn/
2.选择需要的图标，添加到项目，下载到本地，阿里云字体图标在项目中有三种引用方式我们推荐使用第一种引用方式，因为第一种引用方式的兼容性很好
3.

如图

注：示例中的代码复制后，请把路径更改为正确的路径，否则会找不到文件

批改老师：

天蓬老师

批改状态：合格

老师批语：路径很重要

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

vscode编辑器与phpstudy的安装与配置过程

2020-06-11 22:33:54