2020 July 17 HTML与CSS

CSS第六篇：CSS属性-背景

背景

background-image

  1. background-image用于设置元素的背景图片
    1. 会盖在background-color的上面
    2. 在图片的透明区域，可以看到背景色
    3. 背景图片默认是平铺

  2. 如果设置了多张图片

     div {
     background-image: url("bg001.png"),url("bg002.png"),url("bg003.png");
 }
    1. 设置的第一张图片将显示在最上面，其图片按顺序层叠在下面
  3. 注意：如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的。

background-repeat

  1. background-repeat用于设置背景图片是否要平铺
  2. 常见的值有：
    1. repeat：平铺
    2. no-repeat: 不平铺
    3. repeat-x：只在水平方向平铺
    4. repeat-y：只在垂直方向平铺

background-size

  1. background-size用于设置背景图片的大小

     /* 宽度150，高度180 */
 background-size: 150px 180px;
 /* 宽度保持原来的宽高比自动计算，高度180 */
 background-size: auto 180px;
 /* 宽度150，高度保持原来的宽高比自动计算*/
 background-size: 150px auto;
 /* 等价于上面 */
 background-size: 150px;

background-position

  1. background-position用于设置背景图片在水平、垂直方向上的具体位置

    pic

  2. 水平方向还可以设置：left、center、right
  3. 垂直方向还可以设置：top、center、bottom
  4. 如果设置了1个方向，另一个方向默认是center
    1. 比如background-position:80px，等价于:background-position:80px center
    2. 比如background-position:center，等价于:background-position:center center center

背景图片取代image元素

  1. 在很多场合，背景图片能够取代image元素
  2. 代码举例：

    1. 例1：

       div {
     margin-bottom: 30px;
 }
 /* 百度新闻导航背景 */
 .baidu {
     width: 400px;
     height: 50px;
     background-color: #3e98f0;
     /* 背景图片 */
     background-image: url("images/bdnews.png");
     /* 高度固定，宽度自适应 */
     background-size: auto 30px;
     /* 不平铺 */
     background-repeat: no-repeat;
     /* 背景图片居中显示 */
     background-position: center;
 }
 .car {
     background-image: url("./images/car.png");
     /* 不平铺 */
     background-repeat: no-repeat;
     background-color: #ff0;
     /* 背景图片水平居中，垂直靠顶部 */
     background-position: center top;
     width: 100px;
     text-align: center;
     /* padding只影响内容，不影响背景 */
     padding-top: 30px;
 }
 .suv {
     background-image: url("./images/car.png");
     /* 不平铺 */
     background-repeat: no-repeat;
     background-color: #0f0;
     /* 背景图片水平居中，垂直靠顶部 */
     background-position: left center;
     width: 60px;
     height: 50px;
     /* 文字垂直居中 */
     line-height: 50px;
     /* padding只影响内容，不影响背景 */
     padding-left: 60px;
 }
        
 <body>
 <div class="baidu"></div>
 <div class="car">微型车</div>
 <div class="suv">suv车型</div>
 </body>

pic

滑动门技术

  1. 如果是非纯色背景，并且左右还带有圆角等特效效果
  2. 实现方案
    1. 切图特点
      1. 中间切出一个像素宽度
      2. 两头切出2个圆角
    2. 实现步骤
      1. 用一个div包裹一个btn
      2. 2个圆角背景图片设置为div的两头，div设置内边距
      3. 按钮设置填充div的所有内容，1像素宽度设置为btn的背景色，然后平铺

  3. 代码

     .slider {
     width: 100px;
     height: 32px;
     /* 
     同时设置2张背景图片
      */
     background-image: url("images/btn_1.png"),
                       url("images/btn_3.png");
     background-repeat: no-repeat;
     /* background-repeat: no-repeat,no-repeat; */
     background-size: auto 32px;
     /* background-size: auto 32px,auto 32px; */
     background-position: left,right;
     /* background-position: left center,right center; */
     padding: 0 18px;
 }
 .slider button {
     border: none;
     outline: none;
     color: #fff;
     /* 宽高填充父控件div */
     width: 100%;
     height: 100%;;
     /* 背景设置为透明 */
     background-color: transparent;
     background-image: url("./images/btn_2.png");
     /* 背景图片横向平铺 */
     background-repeat: repeat-x;
     background-size: auto 32px;
 }
 <div class="slider">
     <button type="button">按钮</button>
 </div>

    pic

背景大图片适配

  1. 场景：
    1. 有的网页上面整个背景就是个大图片，那么这个大图片是如何适配各种不同屏幕的尺寸呢？
  2. 分析：
    1. 背景是一张很大分辨率的图，比如：1920*489，图片中的主要信息在图片中心
    2. 让背景图片居中显示
    3. 高度等于原图高度，宽度使用原图
    4. 设置图片的最小宽度，一旦屏幕小于最小宽度值，滚动显示

  3. 代码：

     body {
     margin: 0;
 }
 div {
     /* 设置浏览器的最小宽度 */
     min-width: 1000px;
     /* 跟背景图片一样的盖度 */
     height: 489px;
     /* 让背景图片居中 */
     background-image: url("images/mhxy.jpg");
     background-repeat: no-repeat;
     background-position: center;
 }
    
 <div></div>

CSS Spirite

  1. 什么是CSS Sprite？
    1. 是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分
    2. 有人翻译为:CSS雪碧、CSS精灵
  2. 使用CSS Sprite的好处
    1. 减少网页的http请求数量，加快网页响应的速度，减轻服务器压力
    2. 减小图片总大小
    3. 解决了图片命名的困扰，只需要针对一张集合的图片命名
    4. 更换风格方便，只需要在少数张图片上修改图片的颜色或者样式，整个网页的风格就可以改变
  3. Sprite图的使用
    1. 一张图片上有n个图标，那么如何让当前控件的背景显示指定的某个图标呢？
    2. 通过background-position属性设置
    3. 将sprite图片放到PS中，然后测量出指定图标的坐标位置
    4. 然后设置background-position属性值
    5. 注意：精灵图片只能用于背景background设置不能用于img元素
  4. Sprite图片制作（雪碧图、精灵图）
    1. 方法1：Photoshop
      1. 新建一个画布
      2. 将各个小图标拖到上面，按照一定的规则排列好，即可
    2. 方法2：https://www.toptal.com/developers/css/sprite-generator
      1. 打开之后选择”choose files“
      2. 选择想要放置的图片

      3. 该工具会自动添加，而且代码position也一并会生成出来

        pic

  5. 代码举例：

     div {
     background-color: #ff0;
     width: 67px;
     height: 23px;
     background-image: url("images/cars_sprite.png");
     background-repeat: no-repeat;
     background-position: -77px -51px;
 }
 <div></div>
  6. Sprite编写建议

    1. 优化前：

       .div1 {
     background: url("images/cars_sprite.png") -10px -30px;

 }
 .div2 {
     background: url("images/cars_sprite.png") -60px -50px;

 }
 .div3 {
     background: url("images/cars_sprite.png") -110px -75px;
 }

    2. 优化后：

       .div1, .div2, .div3 {
     background: url("images/cars_sprite.png");
 }
 .div1 {
     background-position: -10px -30px;

 }
 .div2 {
     background-position: -60px -50px;

 }
 .div3 {
     background-position: -110px -75px;
 }

background-attachment

  1. background-attachment可以设置一下3个值
    1. scroll：背景图片跟随元素一起滚动（系统默认）
    2. local：背景图片跟随元素以及元素内容一起滚动
      1. 当前元素内容很多，有滚动条，滚动，背景也一起滚动
    3. fixed：背景图片相对于浏览器窗口固定
      1. 浏览器右边有滚动条，滚动，当前控件的背景图片不动。直到滚出当前控件，背景图片也会消失
  2. 使用场合
    1. 比如有个背景墙
    2. 内容滚动背景也要一起跟着滚动，这样才不会看的眼花缭乱
    3. 此时使用local属性

background

  1. background是一系列背景相关属性的简写属性，常用格式是：image position/size repeat attachment color
    1. background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面
    2. 其他属性也都可以省略，而且顺序任意
     background: url("images/cars_sprite.png") center center/150px 200px no-repeat #f00;

  2. background实现图片链接

     /* 通过背景图片实现图片链接 */
 a {
     background: url("images/btn_1.png") no-repeat;
     width: 150px;
     height: 150px;
     display: inline-block;

 }
 <a href="https://www.baidu.com"></a>
 <!-- 通过图片打开链接 -->
 <!-- <a href="https://www.baidu.com">
     <img src="./images/btn_1.png" alt="图片">
 </a> -->

background-image与img的选择

  1. 利用background-image与img都能实现显示图片的需求，在开发中该如何选择？

    pic

  2. 总结：

    1. img：作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片
    2. background-image：可有可无,不影响用户获取信息，有，能让网页更加美观；无，也不影响用户获取完整网页的内容信息
    3. 宗旨：
      1. 在没有任何CSS样式的情况下，用户也能浏览到网页中完整的内容信息（ps:网络出现问题或服务器出现问题时，有可能会导致CSS文件加载失败）
    4. 没有样式也要显示的就用img，可有可无仅仅是为了美化的就用background-image

特殊元素的背景

  1. 没有HTML元素对应着文档画布，如何设置文档画布的背景？
    1. html或者body元素的背景都能够延伸到整个文档画布
    2. 如果同时设置了html和body元素的背景，根元素html的背景才会作为文档画布背景
    3. 建议通过body元素来设置文档画布背景
    4. body、跟html元素默认的都是block元素，没有内容，默认尺寸为0，并不是占据整个屏幕
  2. 伪元素::first-line的背景
    1. ::first-line虽然意为第一行元素内容，但是他的背景并不一定填满一行，取决于各种因素
      1. 取决于：文字大小、容器宽度、文字对齐方式
    2. 即：::first-line的背景紧紧的包裹文字内容

CSS属性-cursor

  1. cursor可以设置鼠标指针（光标）在元素上面的显示样式
  2. cursor常见的设值有：
    1. auto：浏览器根据上下文决定指针显示的样式，比如根据文本和非文本切换指针样式
    2. default：由操作系统决定，一般就是一个小箭头
    3. pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式
    4. text：一条竖线，鼠标指针移动到文本输入框上面默认就是这个样式
    5. none：没有任何指针显示在元素上面
      div:hover {
     /* 挪上去变成小手 */
     cursor: pointer;
 }
  3. cursor除了可以设置系统自带的一些值外，还可以设置图片

    1. 就是让鼠标的指针变成一张图片

       div:hover {
     cursor: url("./images/btn_1.png") 0 0 , pointer;
 }
      1. url()后面的2个数字
        1. 分别代表图片在水平、垂直方向上的偏移，不能设置负数
        2. 0和0代表图片在左上角和指针是重叠的，数值变大，图片左上角会朝着指针左上角方向偏移
        3. 如果水平、垂直分别设置为图片宽高的一半，图片的中心点将和指针重叠
      2. 如果图片找不到，就会使用pointer作为cursor的值

All content is licensed under CC BY-NC-SA

Buit with Jekyll and 3-Jekyll theme • Hosted on Github

Table of Contents