第一篇博客：HTML：background的使用

开篇

    我是一名程序员小白，这是我写的第一篇博客，在学习的路上难免会遇到难以解决的问题，我将会在这里写下我遇到的问题并附上解决方法

希望可以对各位有所帮助！！   

 我们在html中经常会遇到这样的问题

例如：

 

 

 我们在html中做如图所示的单选按钮的时候，为了页面的美观，往往会使用一张图片去代替

我们可以将该区域设置为一个<li></li>元素

 

 

 

 

 设置li的背景图

 

 但是这样会出现一个新的问题

当我们的图片大小超出这个区域的时候就会变成

 

 只显示了四分之一的图片

显然这不是我们想要的，那么该如何去解决呢？

我们只需要更改我们的background属性设置为

background: url(img/ico_unchecked.png) center/100%;

或者

background: center/100% url(img/ico_unchecked.png);

这样我们的图片就可以变成一张大小合适且居中的图片了

知识点：(以下内容均引用Mdn社区内容)

background :

此属性是一个 简写属性，可以在一次声明中定义一个或多个属性：background-clip、背景-颜色、背景-image、背景-origin、背景-位置、背景-重复、背景-size，和背景-附件。

对于所有简写属性，任何没有被指定的值都会被设定为它们的 初始值。

• background属性被指定多个背景层时，使用逗号分隔每个背景层。

  每一层的语法如下：

  • 在每一层中，下列的值可以出现 0 次或 1 次：
    • <attachment>
    • <bg-image>
    • <position>
    • <bg-size>
    • <repeat-style>
  • <bg-size> 只能紧接着 <position> 出现，以“/”分割，如： “”.center/80%
  • <box> 可能出现 0 次、1 次或 2 次。如果出现 1 次，它同时设定背景-origin 和背景-clip。如果出现 2 次，第一次的出现设置背景-origin，第二次的出现设置背景-clip。
  • < background-color> 只能被包含在最后一层。

备注： background-color 只能在 背景 的最后一个属性上定义，因为整个元素只有一种背景颜色。

 

background内的属性值的顺序可以随意摆放

！！注意：

• <bg-size> 只能紧接着 <position> 出现，以“/”分割，如： “”.center/80%