前端游戏开发贴吧

游戏前端开发

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

昨天在切图时遇到如下两个问题：

1.需要背景图片无论浏览器大小如何缩放，背景图片始终宽度百分百显示。

2.需要将给出的一张背景图片和一张靠repeat形成的图片结合形成背景图—

针对第一个问题：

CSS3 background-size图片自适应

background-size属性和background-origin属性、background-clip属性一 样，也是CSS3对于background新增加的属性。它的作用是指定背景图片的大小，比如：对于一个div块，我们需要为它添加一张图片作为背景，然 而图片大小并非总能尽如人意，但我们又不想使用background-repeat属性让背景平铺，那么这时我们就可以使用background- size属性使图片放大或者是缩小来适应div块，当然这也可能会造成背景图的失真。

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

background-size ：[ | | 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的背景图片不在同一个层级上，从而都能显示出来。

前端游戏开发笔试题

引擎游戏前端开发语言

body 的背景图设置

第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放

background: url(imgs/1.jpg)no-repeat;

background-position:center 0; 背景图的定位原点,由于body高不确定

background-attachment:fixed; 背景图片保持固定,不会随页面滚动而滚动

第二种: 这种情况下的背景图会完全的等比缩放, 随着窗口大小改变

首先给html 设置 height:100%;

给body设置

background: url(imgs/1.jpg) no-repeat;

background-size: 100% 100%; 若background-size 值为cover, 此情况下是只要有一边碰到窗口边,就停止, 这种情况下 ,背景图不会等比缩放

同样道理,

body中的元素若想宽高100%,

第一种方式:

先给html设置height:100%; 再给该元素设置width:100%;height:100%;

第二种方式: 给width/height 设置100% 的同时,也要设置position:fixed;

页面若要用到input, 要去掉其默认的 outline 和border, 若使用默认的border,后面js修改时, 第一次交互,会出现微小的像素偏移,建议重置

这一句放在

html中将文字纵向显

对文字对象宽度设置只能排下一个文字的宽度距离，让文字一行排不下两个文字使其文字自动换行，就形成了竖立排版需求

此时需要在该css中加上

word-wrap:break-word; word-break:normal;这个两句 可实现标点换行的,同时整体纵向显示

writing-mode：设置对象书写方向，有两个值，

1.lr-tb：从左向右，从上往下 ，

2. tb-rl：从上往下，从右向左

运行代码发现，IE显示正常，火狐、谷歌浏览器却不支持，所以不建议使用writing-mode属性。我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我并在后台私信我：前端，即可免费获取。

0x00 前言

最近接到个关于移动端适配的任务，因为希望复用 PC 端的数据所以有些东西实现起来比较麻烦，比如现在讨论的显示图片中心区域。原需求是这样的：在图片比例和要显示的容器比例一致时直接按比例缩放就好，但是如果图片比例和容器比例不一致，这时候就要以容器的比例为准，显示图片的中心区域。原谅我苍白的文字描述，下面直接给图：

0x01 如何获取 CSS 设置背景图的大小？

清楚需求后决定将图片以 CSS 的背景图显示，因为依稀记得 background-position 和 background-size 可以设置图片显示的位置和图片缩放比例，因为图片是通过设置 style 显示的，那么现在的问题是怎么能拿到图片的原始大小呢？我们知道 img 元素有 naturalWidth 和 naturalHeight 属性代表原始图片宽、高。那么现在我们就可以通过 js 获取 CSS 中图片的 url 然后通过 new Image() 并设置 src 不就能通过 naturalWidth 和 naturalHeight 的到原始图片的宽高了嘛！示例代码如下(依赖 zepto.js)：(function ($){

// 获取 CSS 背景图片 url 的正则表达式

var urlRegex = /url\(['"]*(.*?)['"]*\)/g;

$.fn.getBackgroundSize = function (callback){

this.each(function (){

// 背景图片元素

var img = $(this);

// new 一个 image 元素作为模板

var tpl = new Image();

// 根据正则获取 css 背景图 url 并设置为模板图片的 src

tpl.src = img.css('background-image').replace(urlRegex, '$1');

// 待图片加载完毕后执行回调函数，传递背景图片元素对象,图片的原宽度和原高度

tpl.onload = function (){

callback(img, tpl.naturalWidth, tpl.naturalHeight);

tpl = null;

}

})

return this;

}

})(Zepto);

使用方法：$('.pic').getBackgroundSize(function(img, width, height){

console.log(img, width, height);

}

0x02 如何只显示图片中心区域

现在我们已经知道原图的宽高和容器的宽高了，然后我们可以分别计算出它们的宽高比，通过比较宽高比我们就可以知道如何设置 background-position 的值了。下面先放代码：$('.pic').getBackgroundSize(function(img, width, height){

// 容器宽高

boxHeight = img.height();

boxWidth = img.width();

// 容器宽高比

boxScale = boxWidth / boxHeight;

// 图片宽高比

imgScale = width / height;

if (imgScale == boxScale) { // 宽高比一致

img.css('background-position', '0 0');

img.css('background-size', '100% 100%');

} else if (imgScale > boxScale) { // 图片过宽情况

// 计算按高度缩放后图片宽度

width = width * (boxHeight / height);

var offset = String(-(width - boxWidth) / 2);

// 向左移 (图片宽度减容器宽度 ÷ 2) 单位，即显示为图片中心区域

img.css('background-position', offset + 'px');

} else { // 图片过高情况

// 计算按宽度缩放后图片高度

height = height * (boxWidth / width);

// 向下移 (图片高度减容器高度 ÷ 2) 单位，即显示为图片中心区域

var offset = String(-(height - boxHeight) / 2);

img.css('background-position', '0 ' + offset + 'px');

}

});

在图片宽高比与容器一致时 background-position 直接设置为 0 0，background-size 设置为 100% 100% 就好了。但是在不一致时 background-size 需要设置为 cover ，因为在图片过宽或过高时设为 cover 会超出容器并因此隐藏起来，这时设置 background-position 才是有效的。不过 background-position 不能直接是原始图片的大小而是经过 background-size 缩放后的大小，所以才会有 width = width * (boxHeight / height); 这样一句计算缩放后宽度的语句。

0x03 总结

上面的代码就基本能够满足需求了，但是这种方式仍然不是完美的解决方案啊。因为图片的中心也未必是最需要展示的内容啊，在一些既不符合比例的图片里还是不会显示重要内容的。还是觉得直接能有符合移动端比例的图比较合适，不过谁叫是老项目呢，要把以前的内容和方式都改了也是很麻烦的说。毕竟 “Done is better than perfect !”，先把砖搬完再说吧～