gpt4 book ai didi

html - 从 .css 文件为 Bootstrap 容器设置背景图像

转载 作者:行者123 更新时间:2023-11-28 15:51:52 24 4
gpt4 key购买 nike

我在从 .css 文件为 bootstrap 容器设置背景图像时遇到问题。

让我们说..

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Background</title>
<link href="style/style.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div id="header">
<div class="container">
<div class="row">
<div class ="col-xs-6" id="logo">
<img src="images/logo_png.png" alt="logo">
</div>
<div class ="col-xs-6" id="menu">
<nav id="menu_nav">
<ul id="menu_nav_ul">
<li><a href="#">ABOUT</a></li>
<li><a href="#">HOW IT WORKS</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>

</body>
</html>

和 CSS:

#header{
background-image: url('../images/banner_header.jpg');
width: 1598px;
height: 888px;
background-size: cover;
}

它不工作,我不知道为什么。

当我尝试直接从 .html 文件执行此操作时,它工作正常,例如:

<div id="header" style="background-image: url('images/banner_header.jpg');">

请帮忙。

最佳答案

我已经复制粘贴了您粘贴的相同代码。但是css类中的背景图片#header class

工作正常。

这是您可以复制的代码:

HTML 文件:

    <!DOCTYPE html>
<html>
<head>
<title>Background</title>
<link href="style/style.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div id="header">
<div class="container">
<div class="row">
<div class ="col-xs-6" id="logo">
<img src="images/logo_png.png" alt="logo">
</div>
<div class ="col-xs-6" id="menu">
<nav id="menu_nav">
<ul id="menu_nav_ul">
<li><a href="#">ABOUT</a></li>
<li><a href="#">HOW IT WORKS</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>

</body>
</html>

CSS FILE style.css inside folder style

#header{
background-image: url('../images/trolltunga.jpg');
width: 100%;
height: auto;
background-size: cover;
}

`

关于html - 从 .css 文件为 Bootstrap 容器设置背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41768382/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com