css 图片相关属性

最新推荐文章于 2025-05-24 10:48:47 发布

ganqing1234

最新推荐文章于 2025-05-24 10:48:47 发布

阅读量545

点赞数

分类专栏： css学习文章标签： CSS IE 网络协议

css学习专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用CSS设置背景图片，包括导入背景图片的方法、背景重复方式、背景定位及固定选项等。通过实例展示了如何综合运用这些属性来实现丰富的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先是导入背景图片，background-image属性，它后面一般会接一个url（。。），里面存有图片的路径，以斜杠/开头的表示绝对路径，否则表示相对路径，这里的相对路径是指相对于css样式文件的路径而不是页面文件的存储位置。当然也可以以网络地址来引用图片，这样的路径必须以协议开头，如：http://。

background-repeat，该属性有四种取值，repeat，no-repeat，repeat-x，repeat-y，默认的为repeat。

background-position，有三种取值方式：一个是采用center， top，right，left，bottom这几种来对图片定位，还有一种更为精确的采用像素来定位，如background-position：8px 10px；三是采用百分比格式，如：background-position：10% 50%；默认值是左上方。这里的定位是相对于背景图片所在的容器而言的。background-position会影响background-repeat的效果，因为图片重复是在图片定位完成之后进行的。

background-attachment，这个属性有两个值fixed，scroll，默认是scroll，它表示背景不随页面scroll而滑动。需要注意的是ie6和它之前的ie版本，这个属性只能针对<body>标签。

背景图片的简写，background: background-color background-image background-attachment background-position background-repeat, 如:body { background: #FFF url(bullseye.gif) scroll center center no-repeat; }