Home / Questions / 220337
Accepted
CesarG
Asked: 2020-12-08 02:21:52 +0800 CST 2020-12-08 02:21:52 +0800 CST

来自 CSS 的图像

  • 772

我想将图像img从 css 文件加载到标签

以下代码来自我的 HTML

<img class="logo-header" alt="tienda online"/>

然后是CSS

img.logo-header{background: url("../img/centro.jpg");}

我的文件夹的结构是这样的

在此处输入图像描述

我无法加载图像，我不知道我是否做错了什么，或者我是否应该将页面上传到托管商并以这种方式放置图像

img.logo-header{background: url("https://www.test.com/img/centro.jpg");}

我的css文件中的规则比较多，排除是没有正确连接到样式表。

html5

2 Answers

  1. Best Answer

    在 html 中，我建议您替换：

    <img class="logo-header" alt="tienda online"/>

    经过

    <div class="logo-header"></div>

    在样式替换：

    img.logo-header{background: url("../img/centro.jpg");}

    经过

    .logo-header {
    background-image: url("../img/centro.jpg");
    width: 200px; /* Definir de acuerdo al ancho de la imagen */
    height: 200px; /* Definir de acuerdo al alto de la imagen */
}

    另一种选择是使用content属性 

    img.logo-header{
    content: url("../img/centro.jpg");
}

    我做了测试，它在以下浏览器中正常工作：

    • 谷歌浏览器：版本 71.0.3578.80
    • Safari：版本 12.0

    除了：

    • 火狐：63.0.3

    PS：我错过了在 Opera 和 IE 中的测试

    • 1

  2. 如果您的标签 <img class="logo-header" alt="tienda online"/>在文件index.html中，则图像的路径是：img/centro.jpg.

    现在，如果你想放置背景图片，你可以像这样直接在 div 中进行（这只是一个示例）：

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <style>
                .logo-header{
                    background: url(img/centro.jpg);
                    background-repeat: no-repeat;
                    background-position: center;
                    height: 300px;
                    width: 100%;
                }
            </style>
        </head>
        <body>
            <div class="logo-header">

            </div>
        </body>
    </html>
    • 1