今天小编跟大家讲解下有关学习CSS的背景图像属性background ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关学习CSS的背景图像属性background 的相关资料,希望小伙伴们看了有所帮助。
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值 这样在网速缓慢背景图像未加载完成或是背景图像丢失之后 仍然可以提供很好的文字可识别性。比如背景图像是一张黑色的底图 那么文字的颜色自然而然会选择浅色调的甚至白色 如果此时背景图像未加载完成或者图像丢失 那么就需要定义一个黑色的背景颜色 才可以保持文字的可识别性。来源:爱蒂网