首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 作文大全 > 正文

    适合做网页背景的图片_CSS如何控制网页背景

    时间：2018-08-11来源：山茶花美文网 本文已影响 人 山茶花美文网手机站

    大家常常为一些比较合适于自己的网页背景的图片而发愁吧，因为这些图片不是太大就是太小，或者太乱，说到背景也就只有背景颜色和颜色图片，这两个大家一定都知道在里加入bgcolor="#808080"和background="URL"对吧，其实也可以用CSS样式来做的背景，整体配合还是非常不错的。

    ·背景颜色 background-color

    这个的默认值是transparent(透明色)。

    以下是引用片段：
    例：body{background-color:yellow}
    H1{background-color:#000000}


    ·背景图片 background-image

    背景图片和背景颜色在HTML里面的设置也是基本相同的，都可以在里加入相关的语句来完成。但是在这里，所指的并非是用这种方法，我用的方法还是CSS。background-image这个的主要功能也就是用来显示图片，如果需要显示图片的话，那么只要在后面加上url(图片的地址)就可以了，不显示嘛，那是最简单不过的了，什么也不要就行了，因为这个默认的就是none，而要加的话，就是在后面加上这个none就可以了。

    以下是引用片段：
    例：body{background-image:url("file&:///C:/WINDOWS/BACKGRND.GIF")} 
    h1{background-image:url("none")}
     
    大家在使用里的背景图片时，一定常常遇到一些图片因为太小，而产生种种如图片的重复出现而破坏了整个页面的美感，想换成其它图片又不合适之类的麻烦情况吧。不过现在好了，大家只要用了以下的几个CSS里控制图片方法，那么你以后就不会再有此类的麻烦事发生了。

    ·图片是否重复显示 background-repeat

    有时候重复显示是需要的，可是有时候重复显示则是让人头痛的，现在这个可以很好的帮助你了，而且它还可以帮你控制图片重复的方式(水平方向重复、垂直方向重复以及两个方向都有重复)，而要实现这三个方向的重复也就只要在bcackground-repeat后面加上repeat-x(水平方向铺开)、repeat-y(垂直方向铺开)、repeat(两个方向铺开)。当然，它可以控制图片的重复，也可以控制图片不重复的。no-repeat这个就是用来表示只显示一幅背景图片，而不是重复出现的，这个可不是默认的哟，默认的是重复显示背景图片(repeat)。
    以下是引用片段：
    例：body{background-image:url("file&:///C:/WINDOWS/BACKGRND.GIF");background-repeat:no-repeat}

    ·定位图片显示位置 background-position

    一张背景图片经过上面的设置后往往还不够的，因为当你使用上面的不重复显示设置后，图片只显示在页面的左上角，而不会在其它地方，可是如果要在中间或者其它地方出现这张背景图片的话，那么background-position这个就可以帮你了，因为它就是用来显示图片相对于左上角的一个位置的(就是默认的值0% 0%)，由两个值来设定，中间用空格来隔开。它的主要的几个值有left|center|right和top|center|bottom，也可以用百分数值指定相对位置或用一个值来指定绝对位置，如50%表示的位置是在中心，而50px的水平值则表示图片距左上角区域水平移动50px单位;这里要特别指出的是，1当你设置值的时候只提供一个值，则相当于只指定水平位置，垂直自动设置为50%;2当你设置的值是负数的时候，则表示背景图片超出边界。

    以下是引用片段：
    例：body{background-image:url("file&:///C:/WINDOWS/BACKGRND.GIF");background-repeat:no-repeat;background-position:100px 10px}

    ·控制图片是否滚动 background-attachment

    上面的两步可以帮你完成图像的定位，可是这样做好以后还不是完美的，因为如果你的页面有滚动条的时候，那么你这张背景图片就不会永远定位在那个位置了，如果想要图片永远定位在那个位置，就只有让这张图片随着页面的内容的滚动而滚动，这时background-attachment就可以帮你了你只要加入scroll(静止)和fixed(滚动)中的其中一个就可以了。当然不是让你乱加的，毕竟scroll是默认的，也就是不让图片随页面的内容而滚动的。

    以下是引用片段：
    例：body{background-image:url("file&:///C:/WINDOWS/BACKGRND.GIF");background-repeat:no-repeat;background-attachment:fixed}


    好了，经过以上这番设置后，背景一定会更美的，但是过多的代码往往可读性很差，容易让人产生错误，所以在这里要告诉大家的就是可以把以上的代码全部加在一起使用，也就是说把以上相关的代码加到background中。在把代码加到background中的时候要在每个值中间加上空格来隔开，而且不要把背景颜色的代码放在背景图片的URL后面，以免图片显示不出来。

    以下是引用片段：
    例：body{background:green url("file&:///C:/WINDOWS/BACKGRND.GIF") fixed 100px 50px no-repeat}

    最后提醒一下大家，如果用代码直接插入的话，那么一定要放下面这个代码的里后再放在之间才能正常显示出来!

    • 适合做网页背景的图片_CSS如何控制网页背景 相关文章:
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文适合做网页背景的图片_CSS如何控制网页背景由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.