CSS中设置背景图片无法显示
前段时间编写 HTML 网页的时候,想要给网页设置一个背景图片,我把 CSS 的三种引入方式(内联样式、内部样式、外部样式)都试了一下:
<body style="background: url('images/1.jpg');"></body>
嗯,这是用的是CSS内联样式,这样写好着呢,背景图片也出来了。
<style type="text/css">
body{
background-image: url("images/1.jpg");
}
</style>
接着试了第二种内部样式,也好着呢……
然后试了一下第三种,外部样式引入CSS:
<link rel="stylesheet" type="text/css" href="css/style.css">
body{
background-image: url("images/1.jpg");
}
嗯?这次图片不显示了,第一反应就是是不是我的路径写错了,后来证实确实是这样的,但是当时不知道怎么改,后来偶然间明白了,确实是图片路径写的有问题:CSS 脚本中引用图片时的路径是相对于 CSS 脚本所在文件夹的,而不是相对于 HTML 文档所在文件夹,当然如果你的图片和 CSS 脚本在同一个文件夹中(我的是图片在 images 文件夹中,CSS 脚本在 CSS 文件夹中),就可以直接写:图片文件名/图片名字,否则的话就需要加上路径。所以应该这样写(../表示上一级目录):
body{
background: url("../images/1.jpg") no-repeat center;
background-size: cover;
background-attachment: fixed;
/*background-image: url("../images/1.jpg");
background-size: 100%;
width: 100%;
height: 100%;*/
}
background-image 是 background 的一个子样式。