简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css背景设置和阿里图标的引用
Blogger Information
Blog 55
fans 3
comment 0
visits 54038
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
css背景设置和阿里图标的引用
王佳祥
Original
1576 people have browsed it

css背景设置和阿里图标的引用

一、css背景颜色

  • 实例1：
  1. <style>
  2.   div{
  3.   width:400px;
  4.   height:400px;
  5.   border:1px solid #000;
  6.   padding:20px;
  7.   }
  8. </style>
  9. </head>
  10. <body>
  11. <div></div>
  12. </body>
  • 预览：

  • 实例2：
  1.  div{
  2.   width:400px;
  3.   height:400px;
  4.   border:1px solid #000;
  5.   padding:20px;
  6.   background-color:burlywood;/* 设置背景颜色 */
  7.   }
  • 预览：

  • 实例3：
  1. background: linear-gradient(red, 30%, blue);  /* 基础线性渐变 */
  2. /*默认情况下，渐变会平滑地从一种颜色过渡到另一种颜色。你可以通过设置一个值来将渐变的中心点移动到指定位置*/
  • 预览：

  • 实例4：改变渐变方向
  1. background: linear-gradient(to right, blue, pink);  /* 向右渐变 */
  2. /*默认情况下，默认情况下，线性渐变的方向是从上到下， 你可以指定一个值来改变渐变的方向*/
  • 预览：

  • 实例5：对角线渐变
  1. background: linear-gradient(to bottom right, blue, red);  /* 向右下角渐变 */
  2. /*设置渐变方向为从一个对角到另一个对角。*/
  • 预览：

  • 实例6：设置渐变角度
  1. background: linear-gradient(70deg, red, blue);  /* 70°方向渐变 */
  2. /*如果想要更精确地控制渐变的方向，你可以给渐变设置一个具体的角度*/
  3. /*在使用角度的时候, 0deg 代表渐变方向为从下到上, 90deg 代表渐变方向为从左到右，正角度都属于顺时针方向，负角度意味着逆时针方向。*/
  • 预览：

  • 实例7：多颜色渐变
  1. background: linear-gradient(red, yellow, blue, orange); /* 多颜色渐变 */
  2. /*默认情况下，所设置颜色会均匀分布在渐变路径中。*/
  • 预览：

二、css背景图片

  • 实例1：
  1. <style>
  2.       div {
  3.         width: 500px;
  4.         height: 500px;
  5.         padding: 20px;
  6.         border: 1px solid #000; /* 设置边框 */
  7.         background-image: url(laohu.jpg);/*设置背景图片*/
  8.       }
  9.     </style>
  10.   </head>
  11.   <body>
  12.     <div></div>
  13.   </body>
  • 预览：

  • 实例2：
  1. background-repeat: no-repeat;/*图片不重复显示*/
  • 预览：

  • 实例3：图片的显示位置
  1. background-position: left center;/*向左居中显示*/
  • 预览：

  • 实例4：图片正中显示
  1. background-position: 50% 50%;/*居中显示*/
  • 预览：

  • 实例5：背景图片大小
  1. background-size: 100%;/*百分百大小显示*/
  • 预览：

三、背景阴影

  • 实例1：
  1. <style>
  2.       div {
  3.         width: 500px;
  4.         height: 500px;
  5.         padding: 20px;
  6.         border: 1px solid #000; /* 设置边框 */
  7.         box-shadow: 5px 10px 5px #888888;
  8.         /*右阴影，下阴影 模糊 阴影颜色*/
  9.       }
  10.     </style>
  11.   </head>
  12.   <body>
  13.     <div></div>
  14.   </body>
  • 预览：

  • 实例2：外发光效果
  1. box-shadow: 0px 0px 5px #888888;
  • 预览：

  • 实例3：背景圆角
  1. border-radius: 50%;
  • 预览：

三、精灵图

1.原理:

  • 把网页中的一些背景图片整合到一张图片文件中, 利用backgroun-position等属性进行背景定位

2.优缺点

  • 优点: 
  1. 减少http请求, 加快网页的加载速度, 提高用户体验
  2.  减少图片的体积, 减少字节数
  3.  解决设计师图片命名的烦恼
  4.  更换风格方便
  • 缺点: 
  1.  开发时需要测量, 比较繁琐
  2. 维护的时候麻烦
  3. 精灵图不能随意改变大小和位置
  4. 宽屏高分辨率的屏幕下, 容易出现背景断裂

3.实例

  • 实例1：
  1.  <style>
  2.       .div1 {
  3.         width: 400px;
  4.         height: 600px;
  5.         border: 1px solid #000;
  6.         background: url(tb.png) no-repeat;
  7.         background-position: -128 -44;
  8.       }
  9.       .div2 {
  10.         width: 113px;
  11.         height: 113px;
  12.         background: url(tb.png) no-repeat;
  13.         background-position: -44px -16px;
  14.       }
  15.       .div3 {
  16.         width: 113px;
  17.         height: 113px;
  18.         background: url(tb.png) no-repeat;
  19.         background-position: -239px -274px;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <div class="div1"></div>
  25.     <div class="div2"></div>
  26.     <div class="div3"></div>
  27.   </body>
  • 预览：

四、阿里字体图标

1.访问链接

2.font-class 引用

  • 实例1：
  1. <link rel="stylesheet" href="font/iconfont.css" />
  2.     <style>
  3.       .zt1 {
  4.         font-size: 66px;
  5.         color: red;
  6.       }
  7.     </style>
  8.   </head>
  9.   <body>
  10.     <span class="iconfont notification icon-icon-test4 zt1"></span>
  11.     <span class="iconfont star_filled icon-icon-test19 zt1"></span>
  12.     <span class="iconfont check_filled icon-icon-test9 zt1"></span>
  13.     <span class="iconfont help_filled icon-icon-test14 zt1"></span>
  14.     <span class="iconfont search icon-icon-test2 zt1"></span>
  15.   </body>
  • 预览：

3. Unicode 引用

  • 实例1：
  1.  <style>
  2.       @font-face {
  3.         font-family: "iconfont";
  4.         src: url("font/iconfont.eot");
  5.         src: url("font/iconfont.eot?#iefix") format("embedded-opentype"),
  6.           url("font/iconfont.woff2") format("woff2"),
  7.           url("font/iconfont.woff") format("woff"),
  8.           url("font/iconfont.ttf") format("truetype"),
  9.           url("font/iconfont.svg#iconfont") format("svg");
  10.       }
  11.       .iconfont {
  12.         font-family: "iconfont" !important;
  13.         font-size: 66px;
  14.         color: lightgreen;
  15.         font-style: normal;
  16.         -webkit-font-smoothing: antialiased;
  17.         -moz-osx-font-smoothing: grayscale;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <span class="iconfont">&#xe633;</span>
  23.     <span class="iconfont">&#xe634;</span>
  24.     <span class="iconfont">&#xe63c;</span>
  25.     <span class="iconfont">&#xe640;</span>
  26.   </body>
  • 预览：

4. Symbol 引用

  • 实例1：
  1.  <script src="font/iconfont.js"></script>
  2.     <style>
  3.       .icon {
  4.         width: 66px;
  5.         height: 66px;
  6.         vertical-align: -0.15em;
  7.         fill: currentColor;
  8.         overflow: hidden;
  9.       }
  10.     </style>
  11.   </head>
  12.   <body>
  13.     <svg class="icon" aria-hidden="true">
  14.       <use xlink:href="#icon-icon-test24"></use>
  15.     </svg>
  16.     <svg class="icon" aria-hidden="true">
  17.       <use xlink:href="#icon-icon-test25"></use>
  18.     </svg>
  19.     <svg class="icon" aria-hidden="true">
  20.       <use xlink:href="#icon-icon-test26"></use>
  21.     </svg>
  22.     <svg class="icon" aria-hidden="true">
  23.       <use xlink:href="#icon-icon-test27"></use>
  24.     </svg>
  25.   </body>
  • 预览：

五、学习总结

1.css背景

  1. background:red; 设置背景颜色
  3. background:linear-gradient(red,blue); 设置背景渐变
  5. background:linear-gradient(to left,red,blue); 向左渐变
  7. background:linear-gradient(to right,red,blue); 向右渐变
  9. background:linear-gradient(bottom to right,red,blue); 对角渐变
  11. background:linear-gradient(70deg,red,blue); 设置渐变角度
  13. background:linear-gradient(red,blue，yellow,pink); 多颜色渐变

2.背景图片

  1. background:url(图片路径); 设置背景图片
  3. background:url(图片路径) no-rapeat; 设置背景图片不重复显示
  5. background-size:100%; 设置背景图片大小为100%显示
  7. background-position:left center; 向左居中显示，center可以忽略
  9. background-position:right center; 向右居中显示，center可以忽略
  11. background-clip:border-box; 背景裁切到边框
  13. background-clip:content-box; 背景裁切到内容
  15. box-shadow: 0px 0px 5px #888888; 设置阴影
  17. border-radius:50%; 设置圆角

3. 精灵图（雪碧图）

  • 精灵图技术产生的目的：

    1.   很多大型网页在首次加载的时候都需要加载很多的小图片，而考虑到在同一时间，服务器拥堵的情况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。

  • 精灵图技术的本质：

    1.   所谓精灵图就是把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。

  • 精灵图用到的插件:page ruler redux / ps

    1.   page ruler redux是一个可以测量任意网页元素并获得尺寸等信息的谷歌浏览器插件。
    2.   首先要下载安装igg谷歌访问助手，并打开开发者模式
    3.   在任意浏览器下载好后解压，直接拖拽到谷歌的扩展程序管理器
    4.   接着打开谷歌商城，搜索page ruler redux并下载安装
    5.   安装好后如下图

这里需要注意图片的打开方式要加上本地域名

4.阿里图标

  • font-class 引用

    1.   font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
    3.   与 Unicode 使用方式相比，具有如下特点：
    5.   兼容性良好，支持 IE8+，及所有现代浏览器。
    6.   相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    7.   因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    8.   不过因为本质上还是使用的字体，所以多色图标还是不支持的。

  • Unicode 引用

    1.   Unicode 是字体在网页端最原始的应用方式，特点是：
    3.   兼容性最好，支持 IE6+，及所有现代浏览器。
    4.   支持按字体的方式去动态调整图标大小，颜色等等。
    5.   但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

  • Symbol 引用

    1.   这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
    3.   支持多色图标了，不再受单色限制。
    4.   通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    5.   兼容性较差，支持 IE9+，及现代浏览器。
    6.   浏览器渲染 SVG 的性能一般，还不如 png。
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！