博客园自定义背景（一）

最新推荐文章于 2024-06-21 03:00:56 发布

weixin_34050005

最新推荐文章于 2024-06-21 03:00:56 发布

阅读量145

点赞数

原文链接：http://www.cnblogs.com/ijrys/p/8455312.html

版权

背景更改如下：

背景容器

我背景是在页首html代码中自定义的一段：


<div id="bgcont">
    <img id="bgimg" src="@{imgurl}">
</div>

这样可以比较方便的控制，也方便以后加一些功能之类的

图片平铺设置

首先要分两种屏幕去适应：
1> 较宽的屏幕
2> 较高的屏幕

对于较宽还是较高的判断还是比较好实现的：

let pw = 1920;
let ph = 1222;
let sw = window.innerWidth;
let sh = window.innerHeight;

if (sw / sh > pw / ph) {
    较宽
} else {
    较高
}

pw是图片宽度，ph是图片高度
sw是窗口宽，sh是窗口高
利用两者的宽高比就比较容易实现想要达到的判断了

较宽的窗口我是让图片宽度填满窗口，高度上进行裁剪
同理较高的窗口我是让图片高度填满窗口，宽度上进行裁剪

但是我想让miku双眼一直在窗口区域内，也就是说，我需要对图片进行一些偏移
这个偏移只发生在
较宽的窗口中对top偏移，较高的窗口中对left偏移【换成bottom和right一样】

以窗口较高的时候的代码解释一下吧：

bg.style.height = "100%";
bg.style.width = "auto";
bg.style.top = "0";
let l = sw / 2 - pw * 0.65 / 1222 * sh;
if (l > 0) l = 0;
let d = sw - l - pw/ph*sh;
if (d < 0) d = 0;
l += d;
bg.style.left = l + "px";

bg是那个img
前三句是消除窗口较宽时产生的影响，你会发现这两坨代码就是围绕height,width,top,left这四个属性来回折腾的
l是计算出来的left值，
后边那句和在之后的d就是消除对应点移动到中心后产生的白边
最后算出一个left值
在let l = sw / 2 - pw * 0.65 / 1222 * sh;这句中的0.65是你想要让图上一点始终出现在窗口中，这个点在图像中的位置为0.65图像宽度，也就是说只要改掉这个0.65，就可以很随意的控制想要实现的区域