登录  /  注册
博主信息
博文 98
粉丝 1
评论 0
访问量 78027
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
背景控制与字体图标学习
阿杰
原创
796人浏览过

背景控制的常用属性

  1. .box{
  2. width: 400px;
  3. height: 400px;
  4. border: 1px solid #000000;
  5. /* 背景色 */
  6. background-color: limegreen;
  7. padding: 20px;
  8. }
  1. <div class="box"></div>

  • 控制背景的覆盖范围限制
    默认是限制在边框区:border-box;限制在内容区:content-box;

    1. .box{
    2. width: 400px;
    3. height: 400px;
    4. border: 1px solid #000000;
    5. /* 背景色 */
    6. background-color: limegreen;
    7. padding: 20px;
    8. /* 控制背景的覆盖范围限制在内容区,裁切 */
    9. background-clip: border-box;
    10. background-clip: content-box;
    11. }

  • 渐变
    1. /* 渐变 */
    2. background: linear-gradient(45deg,red,yellow);
    3. background: linear-gradient(to right,red,yellow);
    4. background: linear-gradient(to left,red,yellow);
  • 背景图片

    1. /* 背景图片 */
    2. background-image: url(demo.jpg);
    3. background-repeat: no-repeat;
    4. /* background-repeat: repeat-y; */
    5. /* background-attachment: fixed; */
    6. /* 背景定位:位置 */
    7. /* background-position: 50px 0;
    8. background-position: right center;
    9. background-position: center right; */
    10. /* 只写一个,第二个默认就是center */
    11. /* background-position: left;
    12. background-position: 50% 20%;
    13. background-position: 50%; */
    14. background-size: contain;
    15. background-size: cover;
    16. /* 简写 */
    17. background: violet;
    18. background: url("demo.jpg") no-repeat center;
  • 阴影
    1. .box:hover{
    2. /* 外发光 */
    3. box-shadow: 0 0 8px #888; /*第一个是水平方向偏移,第二个是垂直方向偏移,第三个是向外扩散程度,第四个是阴影颜色*/
    4. cursor: pointer;
    5. }

精灵图/雪碧图

减少请求,提升网页加载速度

  1. .box1{
  2. width: 500px;
  3. height: 400px;
  4. border: 1px solid #000000;
  5. background-image: url(1.png);
  6. background-repeat: no-repeat;
  7. background-position: 50px 20px;
  8. }
  9. .box2{
  10. width: 110px;
  11. height: 110px;
  12. background-image: url(1.png);
  13. background-repeat: no-repeat;
  14. background-position: -220px -110px;
  15. }
  16. .box3{
  17. width: 110px;
  18. height: 110px;
  19. background-image: url(1.png);
  20. background-repeat: no-repeat;
  21. background-position: -110px -220px;
  22. }
  1. <div class="box1"></div>
  2. <div class="box2"></div>
  3. <div class="box3"></div>

阿里字体图标

阿里巴巴矢量图 https://www.iconfont.cn
下载图标文件

  • font-class 方式引用
    把下载的文件导入项目

    引入css样式

    1. <link rel="stylesheet" href="font/iconfont.css">

    加入图标标签

    1. <span class="iconfont icon-dianzhuangongju hot"></span>

    添加样式

    1. .hot{
    2. font-size: 66px;
    3. color: coral;
    4. }

    效果

  • Unicode方式引用
    第一步:拷贝项目下面生成的 @font-face

    1. @font-face {
    2. font-family: 'iconfont';
    3. src: url('font/iconfont.eot');
    4. src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
    5. url('font/iconfont.woff2') format('woff2'),
    6. url('font/iconfont.woff') format('woff'),
    7. url('font/iconfont.ttf') format('truetype'),
    8. url('font/iconfont.svg#iconfont') format('svg');
    9. }

    第二步:定义使用 iconfont 的样式

    1. .iconfont {
    2. font-family: "iconfont" !important;
    3. font-size: 50px;
    4. font-style: normal;
    5. -webkit-font-smoothing: antialiased;
    6. -moz-osx-font-smoothing: grayscale;
    7. }

    第三步:挑选相应图标并获取字体编码,应用于页面

    1. <span class="iconfont"></span>


  • Symbol 方式引用
    第一步:引入项目下面生成的 symbol 代码:

    1. <script src="./font/iconfont.js"></script>

    第二步:加入通用 CSS 代码(引入一次就行):

    1. .icon {
    2. width: 10em;
    3. height: 10em;
    4. vertical-align: -0.15em;
    5. fill: currentColor;
    6. overflow: hidden;
    7. }

    第三步:挑选相应图标并获取类名,应用于页面:

    1. <svg class="icon" aria-hidden="true">
    2. <use xlink:href="#icon-feidan"></use>
    3. </svg>
批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:完成的不错, 记住步骤
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学