我正在尝试使用 css 在 html 中显示背景图像<section>。我使用 XAMPP 进行本地托管,URL 来自我的 Imgur 帐户。当我运行代码时,背景图像不会出现。有什么想法为什么图像无法显示吗?
.bigslide {
background-image: url("https://imgur.com/haukzXN");
background-repeat: no-repeat;
background-size: cover;
height: 500px;
width: 700px;
}Run Code Online (Sandbox Code Playgroud)
<nav class="nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#page1">Services</a></li>
<li><a href="#page2">About Us</a></li>
<li><a href="#page3">Contact</a></li>
<li><a href="#social">Social</a></li>
</ul>
</nav>
</header>
<body>
<div id="start">
<h1>DT Professional Carpet Cleaning and Hanyman Service.</h1>
<section class="bigslide">
</section>
</div>Run Code Online (Sandbox Code Playgroud)
您使用了https://imgur.com网站上的错误链接。您使用的链接不是图像的链接,而是在线查看图像的链接。
改用这个;
.bigslide {
background-image: url("https://i.imgur.com/haukzXN.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 500px;
width: 700px;
}Run Code Online (Sandbox Code Playgroud)
<section class="bigslide">
</section>Run Code Online (Sandbox Code Playgroud)