前端开发关于网页背景图片的缩放自适应及组合形成背景图的问题

前端游戏开发贴吧
游戏前端开发
游戏开发流程 策划美术前端后端

昨天在切图时遇到如下两个问题:
1.需要背景图片无论浏览器大小如何缩放,背景图片始终宽度百分百显示。
2.需要将给出的一张背景图片和一张靠repeat形成的图片结合形成背景图—
针对第一个问题:
CSS3 background-size图片自适应
background-size属性和background-origin属性、background-clip属性一 样,也是CSS3对于background新增加的属性。它的作用是指定背景图片的大小,比如:对于一个div块,我们需要为它添加一张图片作为背景,然 而图片大小并非总能尽如人意,但我们又不想使用background-repeat属性让背景平铺,那么这时我们就可以使用background- size属性使图片放大或者是缩小来适应div块,当然这也可能会造成背景图的失真。

下面我们就先从它的语法说起吧:

background-size :[ <length> | <percentage> | auto ]{1,2} | cover | contain ;

这 个属性有2个可选值,第1个值用于指定背景图的宽width,第2个值用于指定背景图的高height,如果只设定1个值,则第2个值默认为自动 auto。这两个值可取数字(单位为px)也可以取百分比,当指定为百分比时,大小会由所在区域的宽度、高度,以及background-origin的 位置决定,当然还可以通过cover和contain来对图片进行伸缩。

cover:用于等比放大背景图

contain:用于等比缩小背景图(背景图需大于块,否则背景图仍会被放大以适应块)

auto:默认值

针对第二个问题:
当给了body设置了背景图片后,再新建一个div设置背景图片,并将这个设置为–postion:absolute;z-index:1,从而使它和body的背景图片不在同一个层级上,从而都能显示出来。

前端游戏开发笔试题
web游戏前端开发
引擎游戏前端开发语言
» 本文来自:前端开发者 » 《前端开发关于网页背景图片的缩放自适应及组合形成背景图的问题》
» 本文链接地址:https://www.rokub.com/7056.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!