要求：
- 圖片尺寸任意怖侦，圖片寬高比任意（意思就是隨便拿張圖片都得ok），渲染后不可變形
- 圖片中心與可視區(qū)中心重合
- 圖片充滿整個(gè)屏幕
- 自適應(yīng)屏幕寬高變化
- 給圖片上一層蒙版桶现，便于在其上渲染文字
思路分析：
- 寬高比任意静秆，且不變形，可以推測到背景圖的寬和高必定是一方某一長度設(shè)置膊畴，一方是auto，這樣才能保證不變形病游，所以代碼中關(guān)于
background-size屬性需要這樣設(shè)置唇跨。 - 圖片中心與可視區(qū)中心重合，所以
background-position: center - 圖片充滿整個(gè)屏幕衬衬，需要多重考慮：
（1）如果此時(shí)瀏覽器可視窗口的寬高 和圖片寬高 比例是下面這種
- 圖片充滿整個(gè)屏幕衬衬，需要多重考慮：
bgimg1.png
為滿足充滿屏幕且不變形买猖，圖片應(yīng)該寬度100% 高度自適應(yīng)
background-size:100% auto;
（2）如果此時(shí)瀏覽器可視窗口的寬高 和圖片寬高 比例是另一種情況
bgimg2.png
為滿足充滿屏幕且不變形，圖片應(yīng)該高度100% 寬度自適應(yīng)
background-size:auto 100%;
- 套一層蒙版滋尉，在里面直接寫就行政勃，記得加一個(gè)背景色和透明度，寬高和父元素相同完全覆蓋就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 確保圖片資源已加載以獲取圖片原始大小，再進(jìn)行箭頭函數(shù)中的操作
window.onload = ()=>{ // es6 箭頭函數(shù)讽挟，不了解的請自行查閱
this.init();
this.resizeListener();
}
window.onresize = ()=>{ // 添加監(jiān)聽事件懒叛，在此處使用箭頭函數(shù)，防止this指向window
this.resizeListener();
}
}
}
我自己試驗(yàn)了一下耽梅，完全ok薛窥，小伙伴們?nèi)缬挟愖h請下方留言~
