header-banner-image

ownpower

Dynamic

news

当前位置:首页 > 动态资讯 > 网站制作技巧

网站设计如何多重背景图像?实现方法!

文章作者:众展网络 发布时间: 浏览量:33

在网站设计中我们可能通过html和css代码实现非常多酷炫的效果,比如动态的点击按钮以及下拉效果,还可以对网页背景进行修改,这里如何做成多重背景图像呢?下面众展网络教大家实现方法。

2021112002.jpg

网站设计CSS3技术中,增加了一个多重背景的作用,其特性仍为background,不一样的仅仅必须用英文逗号隔开好几个背景。如今教大伙儿实现多重背景图像方式:大家先来准备好二张背景照片,储放到images文件目录下,名称各自为bg_flower.gif和bg_flower_2.gif。随后撰写基本的html编码,为简单考虑,这儿大家不做一切的原素,反而是立即对body开展实际操作:body{background-image:url(/i/bg_flower.gif),url(/i/bg_flower_2.gif);}。大伙儿也许会感觉那样没有什么实际意义,提早合拼好flower和flower_2不就可以了?我们不探讨切分器重组成一类的优化问题。往往现在可以提早合拼,缘故就取决于二张图的高宽彻底一样,假如第1幅图的高低是第2幅图的二倍。大约你依然感觉不在乎,我将白框所选定的部分合拼成一张图片也一样可以铺平,但那样文档显而易见扩大了。撇开这个问题不用说,假如二张图的规格相差太大关联,那合拼的办法就给跪了。并且多重背景还有一个优势,它可以应对不一样的背景设定不一样的background-repeat,background-position和background-size等特性。例如那样body{background:url(/i/bg_flower.gif),url(/i/bg_flower_2.gif);background-repeat:no-repeat,repeat;}。

为单独HTML原素特定好几个背景是CSS最让人希望的一个特点,根据降低对一些原素的要求(这类原素存有仅仅为了更好地用CSS加上附加的图像背景),特定多重背景便可以简单化HTML编码,并让它非常容易掌握和维护保养。多重背景基本上可以运用于一切原素。多重背景不用应用生产商作为前缀。应用多重背景时,可以应用长方式英语的语法撰写还可以应用短方式英语的语法撰写。假如用长方式英语的语法,必须独立设定4个背景特性:background一color,background-image,background一position和background-repeat。应用在其中一切一个特性,都能够调节图像的市场定位和反复方法。

不会太难发觉,这种特性的值所有都用英文逗号隔开,一个背景相匹配一个值,因此英语的语法十分形象化。更简易的书写,是同时在background中用英文空格符隔开每一项的特性,那样可以节约大量的字节。body{background:url(/i/bg_flower.gif)no-repeat50%50%,url(/i/bg_flower_2.gif)repeat0%0%;}切土豆丝用牛刀(伪元素)是一件很令人啼笑皆非的事儿,因此CSS3特意为大家提前准备了一把轻量的水果刀(多重背景),应用起來十分随手,并且实际效果非常及时。大伙儿在网页页面设计的环节中,应尽量挑选最合适具体需要的方式,进而更有效地达到目标。一句话,沒有较好的,仅有适合自己的。


以上就是众展网络(www.ownpower.cn)为大家带来的“网站设计多重背景图像”,希望能对您有所帮助。这个主要还是通过背景的代码来实现,方法也比较简单,很多方法都可以实现这种效果。

上一篇:豪邦网络公司好不好?

下一篇:

本文由“做网站公司”众展网络整理发布,如需转载请浏览来源及出处,原文地址:https://www.ownpower.cn/problem/1110.html

详情介绍
免费咨询

将您的需求及联系信息发送给我们,工作日2小时内迅速为您提供解决方案。

联系方式

联系人:李先生
手机:+86 15015300720
电话:+86 0769-83078356
邮箱:banth@ownpower.cn
地址:东莞市常平镇口岸大道联检综合大楼B座7G
经理微信

经理微信

电话
咨询热线:
15015300720
微信
微信客服

微信扫一扫联系