2023年6月20日发(作者:)
html全局背景代码,html背景代码⽹页中的背景设计是相当重要的,尤其是对于个⼈主页来说,⼀个主页的背景就相当于⼀个房间⾥的墙壁地板⼀样,好的背景不但能影响访问者对⽹页内容的接受程度,还能影响访问者对整个⽹站的印象。如果你经常注意别⼈的⽹站,你应该会发现在不同的⽹站上,甚⾄同⼀个⽹站的不同页⾯上,都会有各式各样的不同的背景设计。究竟都有哪些不同样式的背景,还有它们的设计⽅法都是怎样的呢,现在就由我来为⼤家作⼀个⽐较完整的总结。1.颜⾊背景颜⾊背景的设计是最为简单的,但同时也是最为常⽤和最为重要的,因为相对于图⽚背景来说,它有⽆与伦⽐的显⽰速度上的优势。在⽹页⽂件中,⼀般通过标签来指定页⾯的颜⾊背景,其HTML语法为:其中的"color"表⽰不同的颜⾊,可以⽤各种不同的颜⾊表⽰⽅法,⽐较常⽤的有直接⽤颜⾊的英⽂名称,如blue、yellow、black等等,还可以⽤颜⾊的⼗六进制表⽰⽅法,如#0000FF、#FFFF00、#000000等等,此外还可以⽤百分⽐值法和整数法,其效果都是⼀样的。颜⾊背景虽然⽐较简单,但也有不少地⽅需要注意,如要根据不同的页⾯内容设计背景颜⾊的冷暖状态,要根据页⾯的编排设计背景颜⾊与页⾯内容的最佳视觉搭配等等。2.沙纹背景沙纹背景其实属于图⽚背景的范畴,它的主要特点是整个页⾯的背景可以看作是局部背景的反复重排,在这类背景中以沙纹状的背景是为常见,所以我们将其统称为沙纹背景。初学主页制作者都有这样的经历,当试图把⾃⼰的照⽚作为页⾯的背景是,却发现浏览器上显⽰出来的不仅仅是⼀个照⽚,⽽是同⼀照⽚在⽔平和竖直⽅向上的反复排列。这就是浏览器处理图⽚背景时的规律⽅法,利⽤这⼀规律我们可以⽤⼀⼩块图⽚作为页⾯背景,让它⾃动在页⾯上重复排列,铺满整个页⾯,从⽽使⽹页的体积⼤⼤减⼩。读者到现在恐怕都已经知道了沙纹背景的原理和实现⽅法,就是找⼀个⼩的图⽚,越⼩越好,但注意要使最后的背景看起来要像⼀个整体,⽽不是若⼲图⽚的堆砌。其实现的HTML语法如下:其中的"picture"表⽰背景图⽚的URL路径。3.条状背景条状背景与沙纹背景是⽐较相似的,它适⽤于页⾯背景在⽔平或竖直⽅向上看是重复排列的,⽽在另⼀⽅向上看则是没有规律的。它也是利⽤浏览器对图⽚背景的⾃动重复排列,与沙纹背景所不同的是它只让图⽚在⼀个⽅向上重复排列。以在竖直⽅向上排列为例,⾸先⽤图像处理软件做⼀个从左到右为蓝⽩渐变的⽔平条状图⽚,其长度与页⾯的宽度相当。也通过将其设为页⾯背景,经浏览器显⽰后,就成为整个页⾯从左到右蓝⽩渐变的分栏颜⾊背景。当然,也可以⽤类似的⽅法实现条状背景在⽔平⽅向上的重复排列。4.照⽚背景把⾃⼰或朋友的照⽚作为页⾯的背景让⼤家看到,是有点令⼈激动的事情,但浏览器对图⽚的⾃动重复排列却使这⼀愿望难以实现。怎么办呢?只有想不到的,没有做不到的,这⾥我们⽤上⼀点简单的CSS。在⽹页⽂件的……之间加⼊下⾯的CSS语句:这样,在⽹页页⾯中,就可以看到你的照⽚位于页⾯的正中间,⽽且在拉动浏览器窗⼝的滚动条时,照⽚仍然位于页⾯的正中间⽽不随页⾯内容⼀起滚动。如果你觉得照⽚位于页⾯的正中间不满意,你也可以随意地调整它在页⾯中的位置,只需要调整"background-position"的值就可以了。5.复合背景如果你在练习上⾯的“照⽚背景”时“不⼩⼼”也设置?lt;body>标签⾥的颜⾊背景,那么你看到了什么?颜⾊背景还起作⽤吗?对,你能看到你的照⽚浮于你设的颜⾊背景之上,⼆者能够同时正常地显⽰出来。这就是复合背景的魅⼒,更为吸引⼈的是,当你所设置的图⽚背景因为某种不可知的因素⽽不能正常显⽰的时候,浏览器能够⾃动⽤你所设置的颜⾊背景取⽽代之。它的设计⽅法,就不⽤我再多说了吧!
2023年6月20日发(作者:)
html全局背景代码,html背景代码⽹页中的背景设计是相当重要的,尤其是对于个⼈主页来说,⼀个主页的背景就相当于⼀个房间⾥的墙壁地板⼀样,好的背景不但能影响访问者对⽹页内容的接受程度,还能影响访问者对整个⽹站的印象。如果你经常注意别⼈的⽹站,你应该会发现在不同的⽹站上,甚⾄同⼀个⽹站的不同页⾯上,都会有各式各样的不同的背景设计。究竟都有哪些不同样式的背景,还有它们的设计⽅法都是怎样的呢,现在就由我来为⼤家作⼀个⽐较完整的总结。1.颜⾊背景颜⾊背景的设计是最为简单的,但同时也是最为常⽤和最为重要的,因为相对于图⽚背景来说,它有⽆与伦⽐的显⽰速度上的优势。在⽹页⽂件中,⼀般通过标签来指定页⾯的颜⾊背景,其HTML语法为:其中的"color"表⽰不同的颜⾊,可以⽤各种不同的颜⾊表⽰⽅法,⽐较常⽤的有直接⽤颜⾊的英⽂名称,如blue、yellow、black等等,还可以⽤颜⾊的⼗六进制表⽰⽅法,如#0000FF、#FFFF00、#000000等等,此外还可以⽤百分⽐值法和整数法,其效果都是⼀样的。颜⾊背景虽然⽐较简单,但也有不少地⽅需要注意,如要根据不同的页⾯内容设计背景颜⾊的冷暖状态,要根据页⾯的编排设计背景颜⾊与页⾯内容的最佳视觉搭配等等。2.沙纹背景沙纹背景其实属于图⽚背景的范畴,它的主要特点是整个页⾯的背景可以看作是局部背景的反复重排,在这类背景中以沙纹状的背景是为常见,所以我们将其统称为沙纹背景。初学主页制作者都有这样的经历,当试图把⾃⼰的照⽚作为页⾯的背景是,却发现浏览器上显⽰出来的不仅仅是⼀个照⽚,⽽是同⼀照⽚在⽔平和竖直⽅向上的反复排列。这就是浏览器处理图⽚背景时的规律⽅法,利⽤这⼀规律我们可以⽤⼀⼩块图⽚作为页⾯背景,让它⾃动在页⾯上重复排列,铺满整个页⾯,从⽽使⽹页的体积⼤⼤减⼩。读者到现在恐怕都已经知道了沙纹背景的原理和实现⽅法,就是找⼀个⼩的图⽚,越⼩越好,但注意要使最后的背景看起来要像⼀个整体,⽽不是若⼲图⽚的堆砌。其实现的HTML语法如下:其中的"picture"表⽰背景图⽚的URL路径。3.条状背景条状背景与沙纹背景是⽐较相似的,它适⽤于页⾯背景在⽔平或竖直⽅向上看是重复排列的,⽽在另⼀⽅向上看则是没有规律的。它也是利⽤浏览器对图⽚背景的⾃动重复排列,与沙纹背景所不同的是它只让图⽚在⼀个⽅向上重复排列。以在竖直⽅向上排列为例,⾸先⽤图像处理软件做⼀个从左到右为蓝⽩渐变的⽔平条状图⽚,其长度与页⾯的宽度相当。也通过将其设为页⾯背景,经浏览器显⽰后,就成为整个页⾯从左到右蓝⽩渐变的分栏颜⾊背景。当然,也可以⽤类似的⽅法实现条状背景在⽔平⽅向上的重复排列。4.照⽚背景把⾃⼰或朋友的照⽚作为页⾯的背景让⼤家看到,是有点令⼈激动的事情,但浏览器对图⽚的⾃动重复排列却使这⼀愿望难以实现。怎么办呢?只有想不到的,没有做不到的,这⾥我们⽤上⼀点简单的CSS。在⽹页⽂件的……之间加⼊下⾯的CSS语句:这样,在⽹页页⾯中,就可以看到你的照⽚位于页⾯的正中间,⽽且在拉动浏览器窗⼝的滚动条时,照⽚仍然位于页⾯的正中间⽽不随页⾯内容⼀起滚动。如果你觉得照⽚位于页⾯的正中间不满意,你也可以随意地调整它在页⾯中的位置,只需要调整"background-position"的值就可以了。5.复合背景如果你在练习上⾯的“照⽚背景”时“不⼩⼼”也设置?lt;body>标签⾥的颜⾊背景,那么你看到了什么?颜⾊背景还起作⽤吗?对,你能看到你的照⽚浮于你设的颜⾊背景之上,⼆者能够同时正常地显⽰出来。这就是复合背景的魅⼒,更为吸引⼈的是,当你所设置的图⽚背景因为某种不可知的因素⽽不能正常显⽰的时候,浏览器能够⾃动⽤你所设置的颜⾊背景取⽽代之。它的设计⽅法,就不⽤我再多说了吧!
发布评论