【发布时间】：2020-06-12 00:08:52
【问题描述】：
所以我希望背景图片在网站的某个点被截断。但是现在当我更改不透明度时，向下箭头按钮将不再起作用。网站上没有背景的另一个按钮确实有效。我在下面列出了代码。我希望你们中的一个可以帮助我弄清楚。 :)
有人知道这是怎么回事吗？
html{
scroll-behavior: smooth;
}
#down{
padding-top: 130px;
opacity: 1.0;
}
.bi-arrow-down-circle{
margin-left: auto;
margin-right: auto;
height: auto;
display: block;
text-align: center;
padding-bottom: 30px;
width: 100px;
height: 100px;
margin-top: -150px;
opacity: 1.0;
margin-bottom: 100px;
}
.bg-image{
height: 1350px;
width: 100%;
background-repeat: no-repeat;
/*overflow: hidden;*/
background-position: center;
margin-bottom: -100px;
}
body{
margin: 0 auto;
}
.navbar{
margin-top: -150px
margin-bottom: 45px;
}
#logo{
margin-top: -1050px;
margin-bottom: 200px;
margin-left: auto;
margin-right: auto;
max-width: 55%;
height: auto;
display: block;
text-align: center;
opacity: 1.0;
}
.carousel-inner img{
width: 100%;
height: 100%
}
.row_1{
display: flex;
flex-wrap: wrap;
padding: 0 4px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.column{
flex: 50%;
padding: 0 4px;
}
#grid{
width: 450px;
height: 450px;
}
.column #grid{
margin-top: 8px;
vertical-align: middle;
object-fit: contain;
text-align: center;
}
@media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
/*#verpakking{
height: 650px;
width: 550px;
}
#verpakking_bs{
height: 850px;
width: 850px;
}*/
ul {
padding: 10px;
}
#stoel{
height: 500px;
width: 500px;
}
.lijst_1{
}
.carousel_1{
display: block;
margin-right: auto;
margin-right: auto;
height: auto;
max-width: 100%;
}
.stoel{
max-height: 50%;
}
#vrouwenkind{
height: 500px;
width: 500px;
}
.lijst_1{
padding: 20px;
}
.footer{
left: 0;
bottom: 0;
width: 100%
color: black;
text-align: center;
background-color: rgb(245,245,245);
margin-top: 20px;
padding: 15px;
}
.img1{
background-image: url('../SC/sky.jpg');
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SC</title>
<link href="./style.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="mail.js"></script>
<script src="spinner.js"></script>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
#contactbtn{
display: block;
margin: 27px auto;
}
</style>
<body>
<div class="bg-image img1" style="opacity: 0.25;"></div>
<div class="container">
<div class=row>
<div><img class="img-fluid mx-auto d-block" id="logo" src="./Seet Cuvers Logo.jpg" alt="SC logo"></div>
</div>
</div>
<a href="#down"><svg class="bi bi-arrow-down-circle" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M4.646 7.646a.5.5 0 0 1 .708 0L8 10.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z"/>
<path fill-rule="evenodd" d="M8 4.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5z"/>
</svg></a>
<nav class="navbar navbar-expand-sm bg-light navbar-light sticky-top">
<a class="navbar-brand" href="#"/>
</nav>
<div class="container" id="down">
<div class="row">
<div class="col-sm-6">
<p><blockquote>
<dl class="lijst_1">
<dd>Sample text</dd>
<dd>Sample text</dd>
<dd>Sample text</dd>
<dd>Sample text</dd>
</dl>
</blockquote>
</div>
<div class="col-sm-3">
<img id="stoel" src="./SC.png">
</div>
</div>
</p>
</div>
</div>
<button id="contactbtn" type="button" class="btn btn-primary" data-toggle="modal" data-target="#contactModal">Contact ons</button>
<div class="modal fade" id="contactModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Contact formulier</h4>
<button type="button" class="close" data-dismiss="modal">X</button>
</div>
<div class="modal-body">
<form method="post" action="mailhandler.php" id="contactform">
<div class="form-group">
<label for="email"> Email address</label>
<input type="email" class="form-control" placeholder="Enter email" id="email" required>
<span class="error">*<?php echo $emailErr;?></span>
</div>
<div class="form-group">
<label for="name">Voor- en achternaam</label>
<input type="name" class="form-control" placeholder="Voor- en achternaam" id="name" required>
<span class="error">* <?php echo $nameErr;?></span>
</div>
<div class="form-group">
<label for="bericht">Bericht</label>
<textarea class="form-control" rows="5" id="bericht"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-succes">Verzend</button>
</div>
<div class="succes_msg" style="width: 100%; height: 100%; display: none;"><h3>Succes! We nemen zo spoedig mogelijk contact met u op</h3></div>
<div class="error_msg" style="width: 100%; height: 100%; display: none;"><h3>Er ging iets mis, probeer het later opnieuw.</h3></div>
</div>
</div>
</div>
</body>【问题讨论】：
-
请给我们一个可能在 jsfiddle 中的工作示例，以便我们重现问题
-
欢迎来到 SO！在您向我们提供完整或部分工作代码之前，我们无法为您提供帮助，您上面提到的代码不完整，
-
您的代码似乎有几个问题！首先，您忘记了类名“row”周围的引号。其次，您没有为“bg-image”类提供背景图片网址。第三，您的图像类未正确关闭。确保用“/>”而不是“>”来关闭它。最后，您的“a href”指向 ID“#down”，但代码中没有 ID 为“down”的元素。只是一些有用的提示！
-
我马上编辑！
-
@Xenvi 我忘了粘贴整个代码，感谢您的反馈！