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 的一个子样式。

本文标签:

版权声明:若无特殊注明,本文皆为《尤尤》原创,转载请保留文章出处。

本文链接:CSS中设置背景图片无法显示 - https://www.yxfseo.cn/post-226.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

00:00 / 00:00
顺序播放