英文:
How to add background image in section of html by using css?
问题
我正在尝试在我的section标签中添加背景图像，但它没有起作用。
我已经选取了正确的文件，但在网页中仍然没有显示任何内容，而且我在YouTube上看到有人在他的代码中写了完全相同的代码，那个是起作用的。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
*
{
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;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>访问印度</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>
<!-- end snippet -->
英文:
I am trying to add a background image in my section tag but it is not working.
I have taken the correct file also still it's showing nothing in the webpage and exactly the same code I have seen someone has written in his code on youtube and that worked
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
*
{
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;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
答案1
得分: 1
以下是翻译好的部分：
当您为容器添加内容时，背景图像将被加载。现在 ".header" 部分的高度为零。
或者您可以将 height: 100% 更改为 height: 100vh，以查看背景图像是否显示。
英文:
When you have some contents for container, the background image will be loaded. Now the the height of ".header" section is zero.
Or you can change height: 100% into height: 100vh to check the background image showing.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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;
}
<!-- end snippet -->
答案2
得分: 0
background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('images/taj-mahal.jpg');
英文:
Enclose the path to image in quotes
background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('images/taj-mahal.jpg');
答案3
得分: 0
你需要在图像路径周围添加单引号。
英文:
you need to add single quotes around the path to the image
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论