【css】加背景图的两种方法详解

一、background: url()

background: url('../../img/bg_line_lin.png') center repeat;

PS：

1.center指的是background-position

一般是两个值：水平位置和垂直位置；如果只写一个的话，表示水平和垂直方向都是center

    background: url("../../assets/s-zczq.png") no-repeat 0 93%;

    background-size:6.9rem 1.08rem;  

从上边的这个例子可以看出，repeat和positon放的位置并没有先后顺序

position：可以设置x和y的形式

size：也可以给宽和高

2.repeat指的是background-repeat

单独repeat的话，表示水平和垂直都repeat，也可以repeat-x；也可以repeat-y

 

二、background-image

background-image: url('../../img/bg_line_lin.png');

background-image 属性为元素设置背景图像。

元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果

background-color: #000000;

 

【补充】background-size

background-size:80px 60px;

PS：也可以直接百分比，还可以cover（无节操放大，放弃一部分显示,挨着边），contain（把图片放大到最大尺寸,保持原比例，可能不挨边）

例如放一张顶满的banner

.banner{

    background: url('../../img/banner.png') center no-repeat;

    height: 5rem;

    width: 100%;

    background-size: contain;

}