如何使用css在html部分添加背景图片？答案

【问题标题】：How to add background image in section of html by using css?如何使用css在html部分添加背景图片？
【发布时间】：2020-07-20 09:53:20
【问题描述】：

我正在尝试在我的部分标签中添加背景图像，但它不起作用。我已经获取了正确的文件，但它仍然没有在网页中显示任何内容，并且与我在 youtube 上看到有人在他的代码中编写的代码完全相同并且有效

*
{
    padding: 0;
    margin: 0;
}

.header
{
    height: 100%;
    background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url(images/taj-mahal.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

<!DOCTYPE html>
<html>
<head>
	<title>Visit India</title>
	<link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">	
</head>
<body>
    <section class="header">
		<div class="container">
            
    </div>
        </section>
	

</body>
</html>

【问题讨论】：

您能解释一下这与 Java 到底有什么关系吗？

标签： java html css web-deployment web-development-server

【解决方案1】：

您需要在图像路径周围添加单引号

【讨论】：

【解决方案2】：

用引号将图片的路径括起来

 background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('images/taj-mahal.jpg');

【讨论】：

【解决方案3】：

当您有一些容器内容时，将加载背景图像。现在“.header”部分的高度为零。或者您可以将 height: 100% 更改为 height: 100vh 以检查显示的背景图像。

.header
{
    height: 100vh;
    background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url(images/taj-mahal.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

【讨论】：