Html与CSS问题总结（一）_the message port closed before css样式错乱-优快云博客

本文链接：https://blog.youkuaiyun.com/manmanlu2006/article/details/98031759

本文解决谷歌浏览器中扩展程序导致的控制台错误，介绍如何通过禁用扩展来排查问题。同时，提供两种JavaScript方法来判断CSS背景图片是否加载完成，包括使用Image对象监听load事件和创建Image元素检查宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、谷歌浏览器控制台出现 Unchecked runtime.lastError: The message port closed before a response was received. 的报错

原因：扩展程序问题

解决：浏览器中，打开chrome://extensions/，逐一关闭排查

参考：https://blog.youkuaiyun.com/m0_37285193/article/details/86735769

2、 js 怎么判断 css background url() 的图片加载完成

var img = data[0].headImage;
$("#usrInfo a").css("background", 'url("' + img + '")');

首先没有javascript的event能判断backgroundimage的加载状态。这个问题目前最好的解决方法还就是new一个Image，给这个image设置src为backgroundimage的路径，然后监听该image的load事件。具体实现参考codepen如果你想用现成的，有人封装了一个jquery插件：waitForImages，用的也是上面这种方法。测试过，就算浏览器关闭了缓存，这个方案也是可行的。

var loading=true;

var img=document.createElement('img');

img.src='url';

img.οnlοad=function(){loading=false;}

另一种方法：

<script type="text/javascript">
window.onload = function(){
var img=new Image();
img.src='0.png';
console.log(img)
if(img.width==0){
alert('图片加载失败')
}else{
alert('图片加载成功')
}
}
</script>

3、DIV重叠 CSS让DIV层叠

要实现DIV重叠，并改变实现DIV盒子层叠重叠顺序，我们对父级使用position:relative,对子级使用position:absolute、z-index（重叠顺序）、left，right，top，bottom绝对定位相当于父级具体位置。

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <title>div重叠 叠加实例 未排层叠顺序</title>
    <style>
        .div-relative {
            position: relative;
            color: #000;
            border: 1px solid #000;
            width: 500px;
            height: 400px
        }
        
        .div-a {
            position: absolute;
            left: 30px;
            top: 30px;
            background: #F00;
            width: 200px;
            height: 100px
        }
        /* css注释说明： 背景为红色 */
        
        .div-b {
            position: absolute;
            left: 50px;
            top: 60px;
            background: #FF0;
            width: 400px;
            height: 200px
        }
        /* 背景为黄色 */
        
        .div-c {
            position: absolute;
            left: 80px;
            top: 80px;
            background: #00F;
            width: 300px;
            height: 300px
        }
        /* DIV背景颜色为蓝色 */
    </style>
</head>
 
<body>
    <div class="div-relative">
        <div class="div-a">我背景为红色</div>
        <div class="div-b">我背景为黄色</div>
        <div class="div-c">我背景为蓝色</div>
    </div>
</body>
 
</html>

https://blog.youkuaiyun.com/senge_com/article/details/90486957?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242