时间戳

首页 > 解决方案 > 如何使用 CSS html 定位背景

html - 如何使用 CSS html 定位背景

问题描述

我怎样才能在不覆盖其余代码的情况下放置我的背景。目前我的代码覆盖了导航栏。我应该将导航栏覆盖在背景之上，还是应该剪切背景以从导航栏下方开始。什么是最有效的，我该怎么做？请让我知道我是否应该发布我的导航栏片段，谢谢！

.wrapper {
    	
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
      
    	background-color: #ffe0af;
    	background-image: linear-gradient(
    		45deg,
    		#ffdd88 25%,
    		transparent 25%,
    		transparent 75%,
    		#ffdd88 75%,
    		#ffdd88
    	  ),
    	  linear-gradient(
    		45deg,
    		#ffdd88 25%,
    		transparent 25%,
    		transparent 75%,
    		#ffdd88 75%,
    		#ffdd88
    	  ),
    	  linear-gradient(45deg, transparent, transparent 50%, #ffc87f 50%, #ffc87f);
    	background-size: 100px 100px;
    	background-position: 0 0, 50px 50px, 50px 0px;
    	-webkit-animation: scroll 5s linear infinite ;
    	animation: scroll 5s linear infinite;
      }
      
      @keyframes scroll {
    	from {
    	  background-position: 0 0, 50px 50px, 50px 0;
    	}
    	to {
    	  background-position: -100px -100px, -50px -50px, -50px -100px;
    	}
      }
      
     
      .button {
    	background-color: #4CAF50;
    	border: none;
    	color: white;
    	padding: 15px 32px;
    	text-align: center;
    	text-decoration: none;
    	display: inline-block;
    	font-size: 16px;
    	margin: 4px 2px;
    	cursor: pointer;
    	position: absolute;
        top: 50%;
      }
<link rel="stylesheet" href= "homebody.css">
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    
    
     <div class="wrapper">
       
        <button class="button">Hello</button>
       
     </div>

标签： htmlcsslayoutbackgroundplacement

解决方案

如果您的意思是导航栏与其后面的较大元素具有相同的背景，这可能是因为您的导航栏根本没有 背景，因此是透明的（其中的文本除外）。在这种情况下，它后面的任何元素的背景也将在导航栏中可见。

为避免这种情况，您可以为导航栏指定背景——颜色、渐变或图像，等等。这将填充导航栏区域，覆盖其后面其他元素的背景。

推荐阅读