网页制作 
首页 > 网页制作 > 浏览文章

学习CSS的背景图像属性background

(编辑:jimmy 日期: 2025/1/7 浏览:3 次 )

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值,这样在网速缓慢背景图像未加载完成或是背景图像丢失之后,仍然可以提供很好的文字可识别性。比如背景图像是一张黑色的底图,那么文字的颜色自然而然会选择浅色调的甚至白色,如果此时背景图像未加载完成或者图像丢失,那么就需要定义一个黑色的背景颜色,才可以保持文字的可识别性。
上一篇:CSS网页布局全精通
下一篇:DIV CSS技术是否适合中国中小网站?
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 站点导航 SiteMap