第十三章 CSS背景和精灵图

作者: S大偉 | 来源:发表于2017-10-25 13:33 被阅读0次

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>背景和精灵图</title>
    <style media="screen">
      /*div{
        width: 300px;
        height: 200px;
      }
      .box1{
        background-color: red;
      }
      .box2{
        background-color: rgb(0,255,0);
      }
      .box3{
        background-color: rgba(0,0,255,0.3);
      }
      .box4{
        background-color: #0ff;
      }*/

      /*div{
        width: 500px;
        height: 500px;
      }
      .box1{
        background-image: url(../HTML5/0.gif);
      }
      .box2{
        background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506490622726&di=c96e3debb0862f56b6176b4051d10e03&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fd62a6059252dd42a4bb6d14f093b5bb5c8eab893.jpg);
      }*/

      /*body{
        background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506491924619&di=2d1783c589c74fc112fe1b10432c4826&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F11%2F03%2F23%2F95f58PICXu2.jpg);
        background-repeat: repeat;
      }*/

      /*div{
        width: 500px;
        height: 500px;
        background-color: red;
        background-image: url(../HTML5/0.gif);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-position: 100px 20px;
        background-position: -20px -20px;
      }*/

      /*div{
        height: 500px;
        background-color: red;
        background-image: url(http://img05.tooopen.com/images/20150625/tooopen_sy_131776287347.jpg);
        background-repeat: no-repeat;
        background-position: center  top;
      }*/

      /*body{
        background: red url(http://img05.tooopen.com/images/20150625/tooopen_sy_131776287347.jpg) no-repeat fixed center top;
        background: red url(http://img05.tooopen.com/images/20150625/tooopen_sy_131776287347.jpg) no-repeat scroll center top;
      }*/

      /*.box1{
        width: 500px;
        height: 500px;
        background-color: red;
        background-image: url(../HTML5/0.gif);
        background-position: right bottom;
        background-repeat: no-repeat;
      }
      .box2{
        width: 500px;
        height: 500px;
        background-color: red;
      }*/

      /*.box1{
        width: 500px;
        height: 500px;
        background-image: url(../HTML5/0.gif);
        background-position: right bottom;
      }
      .box2{
        width: 500px;
        height: 500px;
        background-image: url(../HTML5/0.gif);
        background-position: center top;
        background-repeat: no-repeat;
      }*/

      div{
        width: 100px;
        height: 100px;
        background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506505932259&di=c89811b24ff5f10951987a291ad624fb&imgtype=0&src=http%3A%2F%2Fpic1.cxtuku.com%2F00%2F02%2F13%2Fb494fb44003c.jpg);
        display: inline-block;
      }
      .box1{
        background-position: -300px -160px;
      }
      .box2{
        background-position: -160px -160px;
      }

    </style>
  </head>
  <body>

    <!-- <div class="box1">

    </div>
    <div class="box2">

    </div>
    <div class="box3">

    </div>
    <div class="box4">

    </div> -->
    <!-- <div class="box1">

    </div>
    <div class="box2">

    </div> -->

    <!-- <div class="">
      <p>ajdfkajdkfalkdfj</p>
      <p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p>
    </div> -->

    <!-- <div class="box1">
      <p>我是段落</p>
    </div>
    <div class="box2">
      ![](../HTML5/0.gif)
      <p>我是段落</p>
    </div> -->

    <!-- <div class="box1">
      <div class="box2">
      </div>
    </div> -->

    <div class="box1">

    </div>
    <div class="box2">

    </div>

  </body>
</html>

第九十二课背景颜色

1、如何设置标签的背景颜色
在CSS中有一个background-color:属性,就是专门用来设置标签的背景颜色的
取值：

具体单词
rgb
rgba
十六进制

第九十三课背景图片

如何设置背景图片
在CSS中有一个叫做background-image: url();的属性，就是专门用来设置背景图片的
注意点：

1、图片的地址必须放在url()中，图片的地址可以是本地的地址，也可以是网络的地址
2、如果图片的大小没有标签的大小大，那么会自动在水平和垂直方向平铺和填充
3、如果网页上出现了图片，那么浏览器会再次发送请求获取图片

第九十四课背景平铺

如何控制背景图片的平铺方式
在CSS中有一个background-repeat属性，就是专门用于控制背景图片的平铺方式的
取值：

repeat 默认，在水平和垂直都需要平铺
no-repeat 在水平和垂直都不需要平铺
repeat-x 只在水平方向平铺

repeat-y 只在垂直方向平铺

应用场景：

可以通过背景图片的平铺来降低图片的大小，提升网页的访问速度

第九十五课背景定位上

如何控制背景图片的位置
在CSS中有一个叫做background-position：属性专门用于控制背景图片的位置
格式：

background-position: 水平方向垂直方向;

取值：

具体的方位名词
水平方向：left center right
垂直方向：top center bottom

具体的像素

background-position:100px 200px;
记得一定要写单位px,否则无效；同时取值可以为负数
注意点
同一个标签可以同时设置背景颜色和图片，图片会覆盖颜色

第九十六课背景定位下

如何让图片始终居中

background-position:center top;

应用：

大的图片，重要信息放中间，适应浏览器尺寸变动

第九十七课背景关联和缩写

背景属性缩写的格式

background：背景颜色背景图片平铺方式关联方式定位方式;

注意点：

background属性中，任何一个属性都可以被省略

背景关联方式

默认情况下背景图片会随着滚动条的滚动而滚动，如果不想滚动，就要修改背景图片和滚动条的关联方式

在CSS中background-attachment属性就是专门修改关联方式的
格式：

background-attachment: scroll;

取值：

scroll 默认值，会随着滚动条的滚动而滚动
fixed 不会随着滚动条的滚动而滚动

第九十八课背景图片和插入图片

快捷键

bi background-image:url();
bgr background-repeat:
bp background-position:0 0;
ba background-attachment:;
bg+ background:#fff url() 0 0 no-repeat;

div.box$*2
<div class="box1">

</div>
<div class="box2">

</div>

背景图片

1、仅仅是一个装饰，不会占用位置空间
2、有定位属性，控制位置比较方便

插入图片

1、会占用位置空间
2、没有定位属性，控制位置不太方便
3、插入图片的语义比背景图片的语义要强，所以在企业开发中如果

你的图片想被搜索引擎收录，那么推荐使用插入图片

第九十九课背景图片练习

多张图片拼接成一张图片，div 嵌套背景图片拼接, 大小尺寸一致

第100课 CSS精灵图

CSS精灵图：一种图像合成技术
作用：可以减少请求次数，以及可以降低服务器处理压力
使用方法：CSS精灵图需要配合背景图片和背景定位来使用

第101课 CSS精灵图练习

显示精灵图中的多小图标

内容参考

网友评论

移动端及其他

本文标题：第十三章 CSS背景和精灵图

本文链接：https://www.haomeiwen.com/subject/fyxqpxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

第十三章 CSS背景和精灵图

第九十二课背景颜色

第九十三课背景图片

第九十四课背景平铺

第九十五课背景定位上

第九十六课背景定位下

第九十七课背景关联和缩写

第九十八课背景图片和插入图片

第九十九课背景图片练习

第100课 CSS精灵图

第101课 CSS精灵图练习

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

移动端及其他

第十三章 CSS背景和精灵图

第九十二课 背景颜色

第九十三课 背景图片

第九十四课 背景平铺

第九十五课 背景定位上

第九十六课 背景定位下

第九十七课 背景关联和缩写

第九十八课 背景图片和插入图片

第九十九课 背景图片练习

第100课 CSS精灵图

第101课 CSS精灵图练习

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

移动端及其他

第九十二课背景颜色

第九十三课背景图片

第九十四课背景平铺

第九十五课背景定位上

第九十六课背景定位下

第九十七课背景关联和缩写

第九十八课背景图片和插入图片

第九十九课背景图片练习