背景图像：url() 未显示

Question

我熟悉 html/css，但在试验 background-image:url() 时，没有任何显示。我的 html 非常基础，无法测试；我的图像路径名是正确的。我已经用尽了所有资源，但没有任何效果。这是我的 html:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="test.css"/>
    </head>
        <body>
            <img class="pic">
        </body>
</html>

CSS:

.pic {
    background-image: url(/Users/leslienguyen/Desktop/bgBullet4.png);
    background-size: cover;
}

我已经尝试使用 (-webkit-)background-size、background-attachment，并检查文件是否都在同一位置。当我放置 height 特定像素时，背景有时会起作用，但也不会与 auto 一起起作用。我超级卡住了。

谢谢！

Answer 1

尝试将您的 PNG 文件插入到 Imgur 中，然后将 imgur link 嵌入到代码中，这样做

.pic {
    background-image: url((IMGUR URL.png);
    background-size: cover;
}

Answer 2

您的照片必须有宽度和高度。为了运行代码的目的，我在下面使用了一张随机图片。

    .pic {
        width:100%;
        height:100vh;
        background-image: url('https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg');
       background-size: cover;
    }

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="test.css"/>
    </head>
        <body>
            <img class="pic">
        </body>
</html>

Answer 3

您正在尝试将背景图片添加到图片标签 <img />！这不是 img 标签的工作方式

您可以使用 src 属性插入图像

<img src='/Users/leslienguyen/Desktop/bgBullet4.png' />

或者通过简单地将 class='pic' 移动到正文标签

来将背景设置为您的 body

<body class='pic'>
</body>

Answer 4

尝试在您的 url 地址前后添加“”。

背景图像：url() 未显示

background-image: url() not showing up

html

css

background-image