前端开发学习笔记–CSS 背景

发布于 2018-04-19  230 次阅读


CSS 背景设置可以改变盒模型的尺寸实现可见性

1.background-color 设置元素的背景颜色。属性值是颜色值。

例:

p {
   background-color: red;
}
//设置元素的背景颜色为红色,默认值为 transparent,即透明色

2.background-image 设置背景图片,使用 url 引入图片,即图片的路径

例:

div{
    background-image: url(image.gif);
}
//以 image.gif 图片为背景,当图片不足以覆盖则复制扩展
p {
   background-image: none;
}
//当某个元素单独不需要背景图片时,单独设置 none 值取消背景。

3.background-size 设置背景尺寸大小

例:

p {
   background-image: url(image.gif);
   background-size: 150px 150px;
}
//用长度值表示,分别表示长和高。

background-size 还有其他值,如

p {
   background-image: url(image.gif);
   background-size: auto;
}
//auto 表默认值,以图像本身尺寸显示
p {
   background-image: url(image.gif);
   background-size: cover;
}
//cover 表等比例缩放图像,使图像至少覆盖容器(即 100%),有可能超出容器
p {
   background-image: url(image.gif);
   background-size: contain;
}
//contain 表等比例缩放图像,使其宽度、高度中较大者与容器横向或纵向重合(尽可能让图片完整的显示在元素内)

4.background-repeat 设置图像平铺方式

例:

p {
   background-image: url(image.gif);
   background-repeat: repeat;
}
//设置水平和垂直方向同时平铺图像

也可以设置背景图片只显示一个,不平铺,则用“no-repeat”;水平方向平铺则用“repeat-x”;垂直方向平铺用“repeat-y”

5.background-attachment 设置背景图片是否固定在元素上

值有 scroll(默认值,背景固定在元素上,不会随着内容的滚动而一起滚动)和 fixed(背景固定,内容滚动时背景不动)

例:

p {
   background-image: url(image.gif);
   background-attachment: fixed;
}
//fixed 属性会导致背景产生水印效果,拖动滚动条而背景不动。

6.background-position 设置图片的定位,可以是长度值,百分比或方位

例:

p {
   background-image: url(image.gif);
   background-repeat: no-repeat;
   background-position: center;
}
//将背景图片置于页面中间,如果想置于右上方则值为:top right

7.background-origin 元素盒子内部背景的绘制

例:

p {
   width: 200px;
   height: 100px;
   border: 10px dashed green;
   padding: 50px;
   background-image: url(image.gif);
   background-repeat: no-repeat;
   background-origin: content-box;
}
//设置背景起始位置。

8.background-clip 实现盒子内部的背景剪裁

例:

p {
   width: 200px;
   height: 100px;
   border: 10px dashed green;
   padding: 50px;
   background-image: url(image.gif);
   background-repeat: no-repeat;
   background-origin: content-box;
   background-clip: padding-box;
}
//在内边距盒子内部裁剪背景。

也有其他值,如 content-box(在内容黑子内部裁剪背景)和 border-box(在元素盒子内部裁剪背景)

9.也可以简写 background,其顺序:

background-color/

background-image/

background-repeat/

background-attachment/

background-position/

background-size/

background-origin/

background-clip