我在这里遇到了一个奇怪的问题。我的全屏背景图片与在线图片 url 完美配合但不是什么时候它位于图片文件夹(此处命名为:img)中，而且必须是。
此站点有一个“img”文件夹，里面有 bkg.png 图像。
我还将图像放在根文件夹中，以防万一可以使用以下 url(bkg.png)；但它也没有用。所以最后我在 flickr 上发布了图像并且它正在工作。但是我需要了解问题并将其放在我的 img 文件夹中。
感谢您的帮助。
科琳娜。
/*into folder : root/css/mob_pss.css */
* {
margin: 0;
padding; 0;
font-family: 'Lato', sans-serif;
font-size: 14px;
}
*::after, *::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*into folder : root/css/mob_bkg.css */
html {
/*I've tried those*/
/*background-image: url(css/bkg.png);*/
/*background-image: url(bkg.png);*/
/*they didn't work*/
/*but this works*/
background-image: url(http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-14.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-clip: border-box;
background-color: #464646;
}
@media only screen and (max-width: 767px) {
html {
/*I've tried the following*/
/*background-image: url(css/bkg.png);*/
/*background-image: url(bkg.png);*/
/*they didn't work*/
/*but this works*/
background-image:vb url(http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-14.jpg);
}
}
body {
background-color: transparent;
}<!DOCTYPE html>
<html lang=""> <!--language here-->
<head>
<!--DEVICE MATTERS-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FULL SCREEN BACKGROUND</title>
<link href="css/mob_bkg.css" rel="stylesheet">
<link href="css/mob_pss.css" rel="stylesheet">
<style></style>
</head>
<body>
<!---->
</body>
</html>最佳答案
考虑下面是你的结构
index.html
css
-- style.css
img
-- pic1.jpg
如果你在 style.css 文件中编写你的 css
所以我会在 style.css 中写下面的代码
body{
background: url(../img/pic1.jpg);
}
url() 是相对于你的 css 文件的位置
关于html - 仅当在线 url 时，背景图像不适用于 "img"文件夹中的图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41054826/