Question

应用CSS背景颜色后，我看不到图片。

HTML页面：

<html>
    <head>
    </head>
    <body>
        <div class="heading">
            <h2>
                <span>LUMINO</span>ADMIN
                <img name ="messageicon" alt="Messages" src="<?php echo base_url(); ?>img/closed-envelope-circle.png">
            </h2>
        </div>


    </body>
</html>

CSS页面：

.heading{
    background-color: yellow;
    width: 100%;
    height: 10%;
    left: 0;
    top: 0;
}
.heading h2{
    margin-left: 25px;
    padding: 15px;

}
h2{
    color: white;
}
span{
    color: skyblue;
}

屏幕截图：

应用CSS背景颜色后，图像应该可见。

Answer 1

以防万一，base_url();不是有效的函数（如果您尚未编写函数）。

您可以使用$_SERVER['REQUEST_URI']，它以字符串形式返回您网站上的整个链接。在这种情况下，您可以使用substr来按自己喜欢的形式剪掉刺。

这是我的代码示例：

<html>
    <head>
    </head>
    <body>
        <div class="heading">
            <h2>
                <span>LUMINO</span>ADMIN
                <img name ="messageicon" alt="Messages" src="<?php echo($_SERVER['REQUEST_URI']); ?>img/closed-envelope-circle.png">
            </h2>
        </div>
    </body>
</html>

如果您想进一步了解基本网址，请查看here

享受并享受乐趣；）

---编辑：---

<html>
    <head>
    </head>
    <body>
        <div class="heading">
            <h2>
                <span>LUMINO</span>ADMIN
            </h2>
            <img name ="messageicon" alt="Messages" src="<?php echo($_SERVER['REQUEST_URI']); ?>img/closed-envelope-circle.png" style>
        </div>

        <style>
            .heading {
                background-color: black;
                width: 100%;
                height: 10%;
                left: 0;
                top: 0;
            }
            .heading h2{
                margin-left: 25px;
                padding: 15px;

            }
            h2{
                color: white;
                float: left;
            }
            span{
                color: skyblue;
            }
        </style>
    </body>
</html>

也许这是一个更好的选择，您可以使用e.sperate文件对其进行测试，因此您无需更改原始文件。

Answer 2

图像可能具有透明背景。在这种情况下，它将使用容器的背景色。将背景颜色css规则应用于img，即可为图像添加颜色。

.heading img{
   background-color: white;
}

应用CSS背景颜色后图像不可见

2 个答案: