css里面的背景样式有哪些

使用css设计网页时，可以通过background(背景色)，background-image（背景图片）,background-repeat（背景重复方向）,background-position（背景位置）,background-size(背景图片大小)这几个属性对图片的背景进行灵活的设置

工具/原料

editplus

background的使用

1、background的使用非常容易，仅仅只需要指定一个颜色即可，例如：background:green或者background:#ccc如下例我们将一个宽高均为200px的div设置一个绿色背景<div style="width:200px;height:200px;background:green"> </div>在浏览器中显示如下

background-repeat的使用

1、background-repeat通常和背景图片一起使用，background-repeat共有三个值，这三个值分别是no-repeat，repeat-x,repeat-y,其中no-repeat不平铺，也就是我们背景图片里的单个图片，repeat-x，向x轴方向平铺，repeat-y向y轴方向平铺，如下我们给一个背景图片添加一个x轴方向的平铺<div style="width:200px;height:200px; background-image:url(./001.png); background-repeat:repeat-x"> </div>其输出结果如下

background-size的使用

1、bac氯短赤亻kground-size被用来设置背景图片的大小，用于图片的放大和缩小，在设置background-size时通常亟冁雇乏需要设置2个值，这两个值可以是固定的像素或者是百分比（注意这个百分比是容器的百分比)，例如我希望设置背景图片填满整个容器，那么可以这么设置background-size:100% 100%以下div演示一个将背景图片设置成50%大小 <div style="width:200px;height:200px; border:2px solid #ccc; background-image:url(./001.png); background-repeat:no-repeat; background-position:20px 50px; background-size:50% 150%"> </div>其结果输出如下