时间:2021-05-02
CSS的背景属性“background”提供了众多属性值,如颜色、图像、定位等,为网页背景图像的定义提供了极大的便利。看看background提供的属性值:
从属性值的名字就可以很明白的看出来,分别是:颜色、图像、铺排、滚动、定位,其中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值,这样在网速缓慢背景图像未加载完成或是背景图像丢失之后,仍然可以提供很好的文字可识别性。比如背景图像是一张黑色的底图,那么文字的颜色自然而然会选择浅色调的甚至白色,如果此时背景图像未加载完成或者图像丢失,那么就需要定义一个黑色的背景颜色,才可以保持文字的可识别性。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本CSS教程介绍:1.如何使用像素来定位背景图像,2.如何设置固定的背景图像,3.所有背景属性在一个声明之中。本CSS教程介绍:1.如何使用像素来定位背景图像,
一、background-attachment属性在CSS中,使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动
CSS的背景属性“background”提供了众多属性值,如颜色、图像、定位等,为网页背景图像的定义提供了极大的便利。看看backgro
CSS允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。CSS在这方面的能力远远在HTML之上。CSS允许应用纯色作为背景,也允许使用背景图像创建相当
背景图像可能是所有前端开发人员在我们的职业生涯中至少使用过几次的CSS属性之一。大多数人认为背景图片没有什么不寻常的,但是。。。。。。1.如何将背景图像完美地适