不为人知的 css 属性

background属性

官方链接：CSS background 属性 (w3school.com.cn)

• background-img: url(...)

• background-image: -webkit-image-set(url('xxx') 1x, url('xxx') 2x);

  使图片不失真，如果是 2x 的话，尽量下载下来的图片也是 2x 的

• background-repeat: no-repeat

• background-position

  背景定位，规定背景图像的起始位置，你可以给它一些值，让它左右上下移动。如果只规定了一个关键字，那么第二个值将是“center” （有用）

• background-size: cover;

  按照图片比例 放大或缩小 填充整个容器，不改变图片比例 （有用）

  因为它是按图片自身比例来的，倘若该比例与容器自身比例不一致，那么必然会产生图片的不完整性

• background-size: 100% 100%;

  它是将图片进行 横向与纵向 的拉伸，会改变图片比例。 （无用）

  但是图片比例一旦改变，图片就会失真

唐门暗器

• pointer-events: none;

  一般应用在定位中，假如该元素的定位挡住了它下面的元素，此时就无法触发它下面这个元素的点击事件，那么给这个元素加上这个，就不会挡住这个点击事件了

• transform 的四大砥柱：旋转（rotate）、缩放（scale）、倾斜（skew）、移动（translate）

• padding: 上 左右 下; （在只有三个值的情况下）