我熟悉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-size
,background-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;
}