清风细雨楼

学习CSS的背景图像属性background
网页制作 2024/12/23 佚名
3 1
清风细雨楼 Design By www.eepep.com

CSS的背景属性“background”提供了众多属性值，如颜色、图像、定位等，为网页背景图像的定义提供了极大的便利。看看background提供的属性值：

background : background-color | background-image | background-repeat | background-attachment | background-position

从属性值的名字就可以很明白的看出来，分别是：颜色、图像、铺排、滚动、定位，其中background-repeat、background-position必须是在指定了background-image属性值后才有效。
background-color:transparent | color 。“transparent”是background-color的默认属性值（红色字表示默认值），意为背景色透明，也就是无背景色；而“color”则指的是颜色了，可以是HTML语言支持英文单词，也可以是十六进制的颜色值，当然推荐还是使用十六进制的颜色值来表示，比如黑色使用“#000”。
background-image:none | url 。默认属性值是无背景图，需要使用背景图时可用url进行导入。
background-repeat:repeat | no-repeat | repeat-x | repeat-y 。默认属性值是背景图像在纵向和横向上平铺，如果不希望图像平铺而是以一个完整的衬图来显示的时候则使用“no-repeat”，相同的道理在横向上平铺则是使用”repeat-x”纵向上平铺则使用”repeat-y”。

background-attachment:scroll | fixed 。“scroll”是背景图像随对像内容滚动，“fixed”则是背景图像固定。
background-position:position(length) | position(length) 。对象的背景图像位置有两种方式可选择，一种是使用position（top | center | bottom | left | center | right）来定位背景图像位置，而另一种方式则是使用lefgth（数值）来定位，使用数值需要注意的是，当只有一个数值时，这个值将用于横坐标，纵坐标将默认是50%，如果有两个数值时，则分别是横坐标、纵坐标。
了解并熟悉了以上background属性及属性值之后，很容易的就可以对网页的背景图像做出合适的处理。但是在这里有一个小技巧，那就是在定义了background-image属性之后，应该定义一个与背景图像颜色相近的background-color值，这样在网速缓慢背景图像未加载完成或是背景图像丢失之后，仍然可以提供很好的文字可识别性。比如背景图像是一张黑色的底图，那么文字的颜色自然而然会选择浅色调的甚至白色，如果此时背景图像未加载完成或者图像丢失，那么就需要定义一个黑色的背景颜色，才可以保持文字的可识别性。
清风细雨楼 Design By www.eepep.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
清风细雨楼 Design By www.eepep.com
www.eepep.com 清风细雨楼
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
清风细雨楼 Design By www.eepep.com