学习CSS的背景图像属性background_CSS_青云站长教程网
欢迎来到站长教程网!
  • 秒到短信接口 免费试用
  • 微信支付宝接口 秒结算
  • 中文网站排名|申请加入
  • 搜索引擎全站查询
  • 查询移动网站权重数据
  • 海外主机 台湾公司直销
  • CSS

    当前位置:主页 > 网页制作 > CSS >

    学习CSS的背景图像属性background

    时间:2019-09-11|栏目:CSS|点击:
  • 学习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值,这样在网速缓慢背景图像未加载完成或是背景图像丢失之后,仍然可以提供很好的文字可识别性。比如背景图像是一张黑色的底图,那么文字的颜色自然而然会选择浅色调的甚至白色,如果此时背景图像未加载完成或者图像丢失,那么就需要定义一个黑色的背景颜色,才可以保持文字的可识别性

    本文作者:

       
    相关阅读:
    提供一个最简单的购物车
    Linux系统如何判断CPU是双核还是单核
    javascript 实现的类似hao123的多邮箱登录效果
    Linux系统防火墙进程查看的实用方法
    js 限制表单输入长度 汉字为两个字符
    HTML DOM Viewer
    javascript对象与数组参考大全(9)
    hibernate更新数据方法小结
    GridView弹出新页面/弹出制定大小位置新窗口
    网站超级链接的打开方式探讨
    IE7浏览器下缩放图片失真问题
    MYSQL列类型参考
    如何轻松打造ASP计数器
    jQuery教程:jQuery的核心

    上一篇:用vbs模拟的一个asp的分页显示功能

    栏    目:CSS

    下一篇:SQLServer和XML的集成

    本文标题:学习CSS的背景图像属性background

    本文地址:http://www.jh-floor.com/wangyezhizuo/CSS/50116.html

    广告投放 | 联系我们 | 版权申明

    重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

    如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

    联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

    Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号