背景图像:url() 未显示



我熟悉html/css,但是在尝试background-image:url()时,什么都没有出现。我的 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-sizebackground-attachment,并检查文件是否都在同一位置。当我放置特定像素时,背景有时height有效,但也不适用于auto。我超级卡住了。

谢谢!

图片必须具有宽度高度。我使用了下面的随机图像来运行代码。

.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>

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

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

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

或者只需将class='pic'移动到正文标签,即可将背景设置为body

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

尝试在网址地址前后添加""。

尝试将PNG文件插入Imgur,然后将imgur链接嵌入到代码中,也是如此

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

相关内容

  • 没有找到相关文章

最新更新