Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 背景控制常用属性，精灵图原理与实现，阿里字体图标完整引用-web前端第8章6.19
Blogger Information
Blog 59
fans 6
comment 0
visits 51924
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
背景控制常用属性，精灵图原理与实现，阿里字体图标完整引用-web前端第8章6.19
希望
Original
660 people have browsed it

1.背景控制常用属性

  • 背景尺寸，圆角效果，拉伸图片，图片复盖，盒子阴影，控制盒子阴影大小和颜色，鼠标移入外发光效果，背景裁切，渐变，背景定位，关键字在前在后都没影响，50%实现居中
  • 如下图：
    背景控制属性
  • 代码如下：
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>背景</title>
    7.   <style>
    8.     .box {
    9.       width: 300px;
    10.       height: 300px;
    11.       /* border: 2px solid #000; */
    12.       /* 圆角效果 */
    13.       border-radius: 150px;
    14.       background-color: darkgreen;
    15.       /* padding: 20px; */
    16.       /* 背景裁切 */
    17.       background-clip: border-box;
    18.       background-clip: content-box;
    19.       /* 渐变 */
    20.       background: linear-gradient(red, yellow);
    21.       background: linear-gradient(45deg, red, yellow);
    22.       background: linear-gradient(to right, red, yellow);
    23.       background: linear-gradient(
    24.         to left,
    25.         rgba(255, 0, 0, 0.5),
    26.         white,
    27.         yellow,
    28.         white,
    29.         yellow
    30.       );
    31.       /* 内容区渐变 */
    32.       /* background-clip: content-box; */
    33.       /* 背景图片 */
    34.       background-image: url(girl.jpg);
    35.       background-repeat: no-repeat;
    36.       /* background-repeat: repeat-y; */
    37.       /* background-attachment: fixed; */
    38.       /* 背景定位，位置 */
    39.       /* background-position: 50px 0; */
    40.       /* 关键字前后都没影响 */
    41.       /* background-position: right center; */
    42.       /* background-position: center right; */
    43.       /* 写一个时，第二个默认是中间center */
    44.       /* background-position: left; */
    45.       /* background-position: 50% 20%; */
    46.       /* 50%就是居中 */
    47.       /* background-position: 50%; */
    48.       /* 背景尺寸 */
    49.       background-size: contain;
    50.       /* 拉伸图片 */
    51.       background-size: cover;
    52.       /* 复盖 */
    53.       background: violet;
    54.       background: url("girl.jpg") no-repeat center;
    55.       /* background-clip: content-box; */
    56.       /* 盒子阴影 */
    57.       top: 20px;
    58.       left: 30px;
    59.       /* 控制盒子阴影大小，颜色 */
    60.       /* box-shadow: 5px 10px 6px #888; */
    61.     }
    62.     .box:hover {
    63.       /* 鼠标移入外发光效果 */
    64.       box-shadow: 0 0 8px #888;
    65.       cursor: pointer;
    66.     }
    67.   </style>
    68. </head>
    69. <body>
    70.   <div class="box"></div>
    71. </body>
    72. </html>

    2.精灵图的原理与实现

  • 精灵图放在同一张大图片里，减少http请求，加快网页加载速度,利用x,y轴来获得小图标的位置
  • 如下图，要拿到金色地球和小金杯，首先我们要把igg谷歌访问助手，page ruler两个插件程序添加到谷歌浏览器里
    精灵图的原理与实现
  • 以下是代码：
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>背景实战：精灵图/雪碧图</title>
    7.   <style>
    8.     .box1 {
    9.       width: 500px;
    10.       height: 400px;
    11.       border: 1px solid #000;
    12.       background-image: url("1.png");
    13.       background-repeat: no-repeat;
    14.       background-position: 50px 20px;
    15.     }
    16.     .box2 {
    17.       width: 110px;
    18.       height: 110px;
    19.       background-image: url("1.png");
    20.       background-repeat: no-repeat;
    21.       background-position: -220px -110px;
    22.     }
    23.     .box3 {
    24.       width: 110px;
    25.       height: 110px;
    26.       background-image: url("1.png");
    27.       background-repeat: no-repeat;
    28.       background-position: 0px -220px;
    29.     }
    30.   </style>
    31. </head>
    32. <body>
    33.   <div class="box1"></div>
    34.   <div class="box2"></div>
    35.   <div class="box3"></div>
    36. </body>
    37. </html>

    3.阿里字体图标引用流程

  • 如下图：
    阿里字体图标引用流程
  • 代码如下：
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <!-- 引入字体图标的类样式 -->
    7.   <link rel="stylesheet" href="font/iconfont.css" />
    8.   <title>阿里图标1</title>
    9.   <style>
    10.     .hot {
    11.       font-size: 60px;
    12.       color: coral;
    13.     }
    14.     .cart {
    15.       font-size: 60px;
    16.       color: darkgray;
    17.     }
    18.   </style>
    19. </head>
    20. <body>
    21.   <div>
    22.     <span class="iconfont icon-rexiaochanpin hot"></span>
    23.     <span class="iconfont icon-gouwuchekong cart"></span>
    24.   </div>
    25. </body>
    26. </html>
Correcting teacher：WJWJ

Correction status：qualified

Teacher's comments：总得来说写的不错，可以充实点内容！
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post