大雀软件园

首页 软件下载 安卓市场 苹果市场 电脑游戏 安卓游戏 文章资讯 驱动下载
技术开发 网页设计 图形图象 数据库 网络媒体 网络安全 站长CLUB 操作系统 媒体动画 安卓相关
当前位置: 首页 -> 网页设计 -> HTML/CSS -> 用CSS来控制网页背景

用CSS来控制网页背景

时间: 2021-07-31 作者:daque

·后台脸色 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}

结果指示一下大师,即使用代码径直插入的话,那么确定要放底下这个代码的里后再放在之间本领平常表露出来!

接下来我再引见一下用dw4创造之上款式的本领,由于在dw中仍旧很精细的列出各项来了,简直的效率我也证明过了,以是就扼要的引见一下吧,只有大师不妨领会就行了。 1.在此之前大师该当把css styles这个窗口翻开,如未翻开的话,那么就按shift+f11大概从window下拉菜单中采用此项就不妨了。2.点击右键采用new style...这个选项大概点击底下的带有+号的图标。3.在弹出的窗口中的采用如次,tag采用body由于咱们上头引见的css款式都是对于body的,而在这边我也不过引见这个内里的background,其它的不要引见实质之内;底下的type采用第二个;define也采用第二个,如许你呆会就不妨在该文献中的之间找到一个了,而这内里的实质本来即是我上头引见的。呵~_^4.点击ok后弹出的窗辩才是最要害的。我之前已说过,咱们这次重要引见的是background这个选项,以是在左右的窗口当选中它吧。选中此后右边的窗口将会形成与它关系的树立项,简直的我在上头引见过了,大师只有参照上头的引见就不妨实行了。然而须要证明一下的是在这个窗口中的最底下两项本来即是background-position中的程度目标笔直目标。5.结果再点击ok就不妨实行了。实行后你就不妨在该页的代码(view下的code选项)中找到它们了。

热门阅览

最新排行

Copyright © 2019-2021 大雀软件园(www.daque.cn) All Rights Reserved.