如何阻止不透明度破坏href？

问题描述 投票：0回答：1

所以我想让背景图片在网站上的某一个点上被切断。然而，现在当我改变不透明度的向下箭头按钮将不再工作。在网站上的其他按钮，它没有背后的背景，它的工作。 我已经列出了下面的代码。我希望你们中的一个人可以帮助我弄清楚它 :)

有人知道这是怎么回事吗？

 
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>
html css opacity
1个回答
0
投票

你有 margin-bottom:-100px; 放在 .bg-image 类。这样做的目的是拉入下面的元素 bg-image 成自己的区域。所以下面的一切 bg-image 100px以下将被视为 bg-image，使其无法点击。去掉它，才能把它们带出来。

编辑(在你更新问题后):你的放置stratagies不是很好。你应该考虑将元素嵌套在一个区域的一个块中。这样会使你的html在结构和语义上都是正确的。

.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;  //remove this. This is not within the region of its parent space.
    opacity: 1.0;
    margin-bottom: 100px;
}
0
投票

问题是你的 "bg-image "div由于高度太大，覆盖了按钮。我把那个div的背景做成了红色，这样你就可以看到它覆盖了按钮。这个div的目的是什么？它是要放在项目后面吗？

注意：我用一些来自unsplash的图片替换了图片，所以你可以看到它在演示中的样子，你可以用你的文件位置替换回来。

 
html{
	scroll-behavior: smooth;
}

#down{
	padding-top: 130px;
	opacity: 1.0;
}

.container {
position: relative;
}

	.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('https://images.unsplash.com/photo-1530281700549-e82e7bf110d6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80');
}

#contactbtn{
        	display: block;
        	margin: 27px auto;
        	}
<!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>

        <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="https://images.unsplash.com/photo-1505628346881-b72b27e84530?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80" alt="SeetCuvers logo" /></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></div>
                
                
                
                
                <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="./Seet Cuvers.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>
0
投票

也许你是想这样的东西，不透明度是给不同的DIV我给它的SVG图像。

 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: #000000;
    	text-align: center;
    	background-color: rgb(245,245,245);
    	margin-top: 20px;

    	padding: 15px;
    }

    .img1{
    	background-image: url('https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg');
    	
    }
        <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"></div>
                	<div class="container">
                	<div class=row>
                			<div><img class="img-fluid mx-auto d-block" id="logo" src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.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" style="opacity:0.25;">
                  <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="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg">
		</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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.