Как разместить фон с CSS html - PullRequest
Новая
       87

Как разместить фон с CSS html

0 голосов
/ 01 мая 2020

как я могу поместить свой фон без наложения остальной части моего кода. В настоящее время мой код накладывается на панель навигации. Должен ли я наложить панель навигации поверх фона или обрезать фон, чтобы начать прямо под панелью навигации. Что было бы наиболее эффективным и как я могу это сделать? Пожалуйста, дайте мне знать, если я должен опубликовать мой фрагмент навигационной панели, спасибо! 

.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>

Ответы [ 2 ]

0 голосов
/ 01 мая 2020

Если вы имеете в виду, что панель навигации имеет тот же фон, что и более крупный элемент, который находится за ней, это может быть связано с тем, что ваша панель навигации имеет нет фона вообще и поэтому прозрачна (за исключением текст, который в нем). В этом случае фон любого элемента позади него также будет виден в панели навигации.

Чтобы избежать этого, вы можете назначить фон панели навигации - цвет, градиент или изображение, что угодно. Это заполнит область navbar, покрывая фон других элементов, которые находятся позади него.

0 голосов
/ 01 мая 2020

Я думаю, что у вас, вероятно, есть панель навигации, зафиксированная сверху или абсолютно позиционированная. Если это так, возможно, вам нужно добавить z-index: 10 к вашей панели навигации, и это должно сработать.

И я вижу, что вы используете position: absolute в своей оболочке. Когда вы делаете это, ваша оболочка выходит из потока HTML и перемещается в соответствии с ее относительным родителем. Я не думаю, что вам действительно нужна абсолютная позиция в этом случае, так как она должна быть в своей естественной позиции внутри HTML.

Если вы предпочитаете, поместите весь код в кодовую ручку. Мы можем помочь вам лучше с этим!

...