Question

我尝试使用本地图片作为我网站的部分背景图片。但是，在输入图像的URL并运行项目后，没有任何显示。有些人可以帮帮我。我是CSS和HTML的新手。非常感谢您的帮助。

HTML文件代码：

<body>
    <header>
        <h1 class="logo">JN</h1>
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#youtube">YouTube</a></li>
                <li><a href="#articles">Articles</a></li>
                <li><a href="#vine">Vine</a></li>
                <li><a href="#social">Social</a></li>
                <li><a href="#podcasts">Podcasts</a></li>
                <li><a href="#share">Share</a></li>
                <li><a href="#more">More</a></li>
            </ul>
        </nav>
        <a href="mailto:thismailisforrandomstuffs@gmail.com">Email me</a>
    </header>
</body>

CSS文件代码：

h1.logo {
  visibility: hidden;
  background-image: url(JN-website-logo-Transparent-background.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

我计算机上CSS文件的路径是：

/Users/justin/Desktop/JN website/JN/public_html/CssAbout.css

我电脑上的图片路径是：

/Users/justin/Desktop/JN website/JN/Image/JN-website-logo-Transparent-background.svg

Answer 1

删除可见性：隐藏

h1.logo {
 background-image: url(JN-website-logo-Transparent-background.svg);
 background-repeat: no-repeat;
 background-position: center;
 background-size: contain;
}

Answer 2

尝试删除visibility: hidden;声明

或将其更改为visibility: visible;

Answer 3

CSS中有两条非凡的线条：

visibility: hidden;

嗯，我认为这条线说明了一切。它会导致h1不可见。您可以安全地删除此行。

background-image: url(JN-website-logo-Transparent-background.svg);

对于这一行，我们必须看看以下内容：

我计算机上CSS文件的路径是：

/ Users / justin / Desktop / JN website / JN / public_html / CssAbout.css

我电脑上的图片路径是：

/用户/贾斯汀/桌面/ JN   网站/ JN /图像/ JN-网站标识的透明background.svg

您已将背景图像设置为文件JN-website-logo-Transparent-background.svg。但是此文件与CSS文件不在同一文件夹中。您必须将该行更改为：background-image: url('...');，其中的点必须替换为您的图像文件路径。

Answer 4

您可以尝试将尺寸添加到h1

＆＃13;

h1.logo {
  background-image: url(http://domaingang.com/wp-content/uploads/2012/02/example.png);
  //your image
  //background-image: url(JN-website-logo-Transparent-background.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width:200px;
  height:200px;
}

＆＃13;

<body>
    <header>
        <h1 class="logo"></h1>
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#youtube">YouTube</a></li>
                <li><a href="#articles">Articles</a></li>
                <li><a href="#vine">Vine</a></li>
                <li><a href="#social">Social</a></li>
                <li><a href="#podcasts">Podcasts</a></li>
                <li><a href="#share">Share</a></li>
                <li><a href="#more">More</a></li>
            </ul>
        </nav>
        <a href="mailto:thismailisforrandomstuffs@gmail.com">Email me</a>
    </header>
</body>

＆＃13;

让我知道图片现在是否显示。

Answer 5

h1.logo {
 background-image: url(JN-website-logo-Transparent-background.svg);
 background-repeat: no-repeat;
 background-position: center;
 background-size: contain;

 font-size: 0px;
 line-height: 20px;
}

字体大小和行高属性应使h1内的文本不可见而不隐藏背景图像。行高特别是阻止h1收缩太多的原因。

Answer 6

你提到

...输入图像的URL并运行项目后

这表明您的网页在本地http测试服务器上运行，这意味着服务器使用您网站的域名或别名（例如： localhost / JN网站或 192.168 .xxx.xxx / JN网站）。

服务器将其放在文件名前面（如 http://localhost / Users / justin / Desktop / JN网站/ JN / Image / JN-website-logo-Transparent-background .svg）哪个不存在。尝试将CSS更改为background: url(../Image/JN-website-logo-Transparent-background.svg)这是图像的相对路径，应该由服务器找到（如 localhost / Image / JN-website-logo-Transparent-background.svg ）。

当然，请删除h1 {visibility: hidden}

CSS背景图片没有显示在我的电脑上

6 个答案: