在CSS中,我们可以使用背景图片来增添网页的美观性和视觉冲击力。而且,通过CSS中使用背景图片来作为页面布局背景,可以大大的减少HTML文档中的代码量。下面我们来学习一下怎样使用CSS把图片当作页面背
在CSS中,我们可以使用背景图片来增添网页的美观性和视觉冲击力。而且,通过CSS中使用背景图片来作为页面布局背景,可以大大的减少HTML文档中的代码量。下面我们来学习一下怎样使用CSS把图片当作页面背景。
background-image:url("图片路径"); background-repeat:repeat; /* 背景图片重复方式 */ background-attachment:scroll; /* 背景图片随滚动条滚动 */ background-position:center center; /* 背景图片位置 */ background-size:cover; /* 背景图片自适应屏幕大小 */
在上述代码中,我们采用background-image属性来插入图片。其中"图片路径"是本地图片存储的路径。在background-repeat属性中,我们可以设置图片重复的方式。可选参数有:repeat-x(水平方向重复)、repeat-y(垂直方向重复)、no-repeat(不重复)、repeat(水平垂直方向重复)。如果你的图片在页面中只需出现一次,那么可以采用no-repeat的方式。当我们设置background-attachment为scroll时,在页面上滚动时,背景图片会随之滚动。如果设置为fixed,那么当页面滚动时,图片将会保持固定。background-position中,center center代表了图片的中心位置,可以根据需要修改。background-size属性是可以让图片自适应浏览器大小。
粉丝
0
关注
0
收藏
0