html css 中非常经典的背景图片充满屏幕且不变形问题

2019-04-12 本文已影响0人 LilyLaw

要求：

图片尺寸任意，图片宽高比任意（意思就是随便拿张图片都得ok），渲染后不可变形
图片中心与可视区中心重合
图片充满整个屏幕
自适应屏幕宽高变化
给图片上一层蒙版，便于在其上渲染文字

思路分析：

宽高比任意，且不变形，可以推测到背景图的宽和高必定是一方某一长度设置，一方是auto，这样才能保证不变形，所以代码中关于background-size属性需要这样设置。
图片中心与可视区中心重合，所以 background-position: center
1. 图片充满整个屏幕，需要多重考虑：
  （1）如果此时浏览器可视窗口的宽高和图片宽高比例是下面这种

bgimg1.png

为满足充满屏幕且不变形，图片应该宽度100% 高度自适应
background-size:100% auto;

（2）如果此时浏览器可视窗口的宽高和图片宽高比例是另一种情况

bgimg2.png

为满足充满屏幕且不变形，图片应该高度100% 宽度自适应
background-size:auto 100%;

套一层蒙版，在里面直接写就行，记得加一个背景色和透明度，宽高和父元素相同完全覆盖就ok了。

代码：

<!-- test.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片问题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="bgimg"></div>

    <script src="./bgimg.js"></script>
    <script>
        let MybgImg = new MiddleBg({
            id: 'bgimg',
            imgsrc: 'https://weiliicimg6.pstatp.com/weili/l/627990026226630794.webp'
        })

        MybgImg.bgRender();
    </script>
</body>

</html>

// bgimg.js

function MiddleBg(obj){
    this.id = obj.id;
    this.imgsrc = obj.imgsrc;
    this.bgimgDOM = document.getElementById(this.id);
    this.bgimg = new Image();
    this.bgimg.src = this.imgsrc;
}

MiddleBg.prototype = {
    init: function(){
        let innbgshadow = document.createElement('div');
        innbgshadow.className = 'bgshadow';
        innbgshadow.innerHTML = 'Hello ~ ~ ~'
        this.bgimgDOM.appendChild(innbgshadow);

        this.bgimgDOM.className = 'bgimg';
        let styleEle = document.createElement('style');

        // es6 模板字符串，不了解的请自行查阅
        styleEle.innerHTML = `.${this.bgimgDOM.className},.${this.bgimgDOM.className} .bgshadow {
          height: 100%;
        }
        .${this.bgimgDOM.className}{
            background: url('${this.imgsrc}') no-repeat center;
        }
        .${this.bgimgDOM.className} .bgshadow {
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 5em;
          background: rgba(68, 68, 68, .4);
        }`;
        this.bgimgDOM.appendChild(styleEle);
    },
    resizeListener: function(){
        if (window.innerWidth / window.innerHeight >= this.bgimg.naturalWidth / this.bgimg.naturalHeight) {
            this.bgimgDOM.style.backgroundSize = '100% auto';
        } else {
            this.bgimgDOM.style.backgroundSize = 'auto 100%';
        }
    },
    bgRender: function(){
        // onload 确保图片资源已加载以获取图片原始大小，再进行箭头函数中的操作
        window.onload = ()=>{ // es6 箭头函数，不了解的请自行查阅
            this.init();
            this.resizeListener();
        }
        window.onresize = ()=>{ // 添加监听事件，在此处使用箭头函数，防止this指向window
            this.resizeListener();
        }
    }
}

我自己试验了一下，完全ok，小伙伴们如有异议请下方留言~

html css 中非常经典的背景图片充满屏幕且不变形问题

要求：

思路分析：

代码：

猜你喜欢

热点阅读