一、背景图片设置大小Css
CSS提供了多种方式来设置背景图片以及图片的大小,下面将列举其中的几种方式。
1. background-image属性
CSS通过background-image属性来设置背景图片,如下所示:
body { background-image: url("/images/background.jpg"); }
其中,url("/images/background.jpg")为背景图片的路径。
2. background-size属性
CSS通过background-size属性来设置背景图片的大小,如下所示:
body { background-image: url("/images/background.jpg"); background-size: cover; }
其中,cover为背景图片的大小类型,它会将背景图片等比例放大或缩小,在保持图片比例的前提下,尽可能覆盖整个容器。
3. background-repeat属性
CSS通过background-repeat属性来设置背景图片不重复或重复显示,如下所示:
/* 不重复显示 */ body { background-image: url("/images/background.jpg"); background-repeat: no-repeat; } /* 垂直重复显示 */ body { background-image: url("/images/background.jpg"); background-repeat: repeat-y; } /* 水平重复显示 */ body { background-image: url("/images/background.jpg"); background-repeat: repeat-x; } /* 水平垂直都重复显示 */ body { background-image: url("/images/background.jpg"); background-repeat: repeat; }
其中,no-repeat表示不重复显示,repeat-y表示垂直重复显示,repeat-x表示水平重复显示,repeat表示水平垂直都重复显示。
二、背景颜色设置Css
CSS提供了多种方式来设置背景颜色,下面将列举其中的几种方式。
1. background-color属性
CSS通过background-color属性来设置背景颜色,如下所示:
body { background-color: #f6f6f6; }
其中,#f6f6f6为背景颜色的值,可以使用十六进制、RGB值、颜色名称等来表示颜色。
2. background属性
CSS通过background属性来设置背景颜色,它可以一次性设置背景颜色、图片、大小等多个属性,如下所示:
body { background: #f6f6f6 url("/images/background.jpg") no-repeat center center fixed; }
其中,#f6f6f6为背景颜色的值,url("/images/background.jpg")为背景图片的路径,no-repeat表示不重复显示,center center表示水平垂直居中显示,fixed表示背景图片随滚动条滚动。
三、小结
本文介绍了CSS如何设置背景图片和颜色,内容涵盖了背景图片的大小设置、颜色的设置、以及通过background属性一次性设置多个属性等。