css（四）---背景图片和其他小功能

背景图片属性
我们知道标签可以来展示图片，但是如果我们想要在图片上面写字的话，这个标签就不好用了，这个时候就需要用到一个属性叫做background-image背景图片属性。了解这个属性之前大家一定得知道background是一个复合属性，里面有好多的小的属性，接下就用到了。

background-image: url();

url里面放本地绝对地址或者本地相对地址或者网上的链接都可以，这样我们就可以给一个元素设置背景图片了，然后元素里面正常写文字就可以。

• background-size属性
• 1.cover(覆盖)
  
  • 这个属性值可以让浏览器以一张图片尽可能填充满我们的容器，当图片大的时候会截掉多余的部分。
    它的填充机制是：先找图片宽或者高的其中的一个，固定这一个宽或者高变成容器的宽或者高之后，让另一边等比例的放大或者缩小，当这个另一边可以填充满容器的时候，就把多余的部分裁掉，然后采用这一种方式，如果这种方式填充不满的话，如果刚才固定的宽，那么这一次就固定高度，让宽度变化。这两种方式里面一定会有一种方式是可以使用的。
    接下来用一个美女图来举下例子：
    （正常的图片是）
    

 div{
    height: 200px;
    width: 300px;
    border: 1px solid black;
    background-image: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=204558500,2684767227&fm=27&gp=0.jpg);
    background-size: cover
    }

结果是：

和上文的解释基本相同，它会根据你给的宽高进行调节的，然后在作出变换。就形成了上图，当然可以自己去试一下。

• contain(包含)
  -这个属性值是让浏览器尽可能展示出来图片的全部信息。如果还剩余很多空间的话，那么就填充相同的图片。
  它的填充机制和cover是一样的，不过它固定一条边之后，是让另外一条边可以全部显示，而不是可以填充满容器。

    div{
    height: 200px;
    width: 300px;
    border: 1px solid black;
    color: white;
    background-image: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=204558500,2684767227&fm=27&gp=0.jpg);
    background-size: contain;
    }

• 设置x y 像素值

  • background-size:100px 100px
    这会让图片强行改变成100px*100px的图片，无论原图是大于这个设置值还是小于这个设置值。

• 百分值

  • background-size: 50% 50%;
    这样会让图片占容器宽高的50%——记住，子级元素的百分比相对的数值是父级里面的这个属性的值，比如父级的高度是100px，那么子级的50%就是50px。

  - background-repear属性

• 这个属性可以设置背景图片是否可以重复显示，默认是重复的repeat。也就说默认状态下，容器空余很多的时候，就会有相同的图片来填充容器剩余空间。
  而值为no-repeat的时候，不论容器剩余多少空间，都不会进行图片复制填充了。
  -background-position属性
  .像素

  -background-position: 50px 50px;
  这样背景图片就会从容器的x轴50px y轴50px的位置开始显示。

  -百分比
  -background-size:50% 50%;
  百分比一定要把两个值都写上！
  值得注意的是：百分比的基准点是图片的中心点，当时50% 50%的时候，图片刚好会在容器的正*显示。像素的基准点是图片的左上角的点。

  如何让背景图片出不来的时候显示文字?

  有的时候我们的网页会被用户禁止加载图片和css样式，如果我们没有给背景图片设置任何信息的话，那么用户就会完全不知道这个空白的地方是什么东西，所以我们要让图片加载不出来的时候能够有文字展示出来，告诉用户这里是什么东西。这一般在设置背景图片的时候用到，而在img标签就不需要，因为他有alt属性，可以设置。
  那么接下来，就介绍一下这些方法吧：

• 利用text-indent属性

  • 们利用首行缩进，然后配合让white-space:nowrap和overflow:hidden;让元素内部的文字在有css的时候，会被缩进到元素外面并且被隐藏起来。当css不能加载的时候，文字不会被缩进，所以可以展示出来。

    height: 400px;
    width: 300px;
    border: 1px solid black;
    color: rgb(216, 50, 38);
    background-image: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=204558500,2684767227&fm=27&gp=0.jpg);
    text-indent: 300px;//这个首行缩进的多少就是上面的width，这样才会不显示文字
    white-space: nowrap;
    overflow: hidden;

这种方式虽然简单，但是不常用。接下来的方法比较常用，也是经常使用的。

• .背景图片放到padding里面，高度强制为0.
  
  • 要知道background-image是可以放到padding里面的，我们利用padding-top撑起来元素的内容区，然后元素本身的高度为0，这样当有css样式的时候，我们配合overflow:hidden一起使用，就可以让文字隐藏，没有css样式的时候，文字就会正常显示出来。

height: 0;
    width: 300px;
    border: 1px solid black;
    color: rgb(216, 50, 38);
    background-image: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=204558500,2684767227&fm=27&gp=0.jpg);
    white-space: nowrap;
    padding-top: 200px;//这个属性把内容区给撑开了，但是高度强制为0，显示不了文字。
    overflow: hidden;

后面还会有东西用到这个属性的，这种方法挺重要的。

溢出部分打点
假设有一段文字比较长，但是元素的宽度是有限制的，不可能太长，超出部分需要打点。“…”

• 单行文字打点

<div>
超出部分要打点，超出部分要打点，超出部分要打点，超出部分要打点，超出部分要打点。
</div>

则会这样显示：

我的宽度就这么大啊，多余的部分我们并不想要他们显示，想让它以省略号的形式展现出来。

        height: 23px;
        width: 300px;
        border: 1px solid black;
        color: rgb(216, 50, 38);
        overflow: hidden;//超出部分隐藏。
        white-space: nowrap;//让文字不换行。
        text-overflow: ellipsis;//文字超出以后打点。

经过这个样式的执行之后，结果显示为：

1.overflow:hidden;实现的是让文字溢出容器的部分隐藏起来，方便后面的打点功能。

2.white-space:nowrap;让文字不换行。文字的默认状态是换行的，当到达容器壁之后自动换到下一行，这个属性让文字一直在一行显示，即使到了容器壁也不换行。

3.text-overflow:ellipsis;文字溢出之后，怎么处理。这里的处理方式是以点状显示。

• 多行文字打点
  
  • 而如果我们想要以属性的方式来完成溢出打点的功能的话，就要用到以下的属性了：
  • white-space: normal;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;

这里的-webkit-前缀的意思是兼容webkit内核的浏览器，现在还有很多浏览器不支持line-clamp这个属性，只有webkit的较高的版本勉强支持。想要看一下那些浏览器兼容的话，就去 can i use 自己查看。

其实现在虽然有属性可以达到多行文字溢出打点的功能，但是兼容性十分不好，除了移动端的网页——因为移动端的浏览器一般版本都比较高——之外，pc端的网页一般都是用其他的方式来实现。像百度就是通过计算文字的宽高，然后在最后手写“…”来实现的多行文字溢出打点效果。

大家知道，不仅单行可以打点，多行也是可以打点的。就是多行打点的兼容性不是太好，所以不怎么使用的。