Incliner un fond d'arrière-plan de la page

-1

Je travaille avec du code pour incliner un arrière-plan de la page. La partie de la page est la suivante:Incliner un fond d'arrière-plan de la page

HTML:

 <div id="Fleet"> 
     <div class="section Fleet_section"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <h1><?php echo FLEET; ?></h1> 
       </div> 
      </div> 

       <div class="row top-buffer"> 

        <div class="col-sm-6 col-md-4"> 
        <div class="thumbnail Staffinview1 delay0_5s"> 
         <img src="./images/xxxx.jpg"> 
         <div class="caption"> 
         <h3>XXXX</h3> 
         </div> 
        </div> 
        </div> 


        <div class="col-sm-6 col-md-4"> 
        <div class="thumbnail Staffinview1 delay1s"> 
         <img src="./images/yyy.jpg"> 
         <div class="caption"> 
         <h3>yyy</h3> 
         </div> 
        </div> 
        </div> 


        <div class="col-sm-6 col-md-4"> 
        <div class="thumbnail Staffinview1 delay1_5s"> 
         <img src="./images/zzz.jpg"> 
         <div class="caption"> 
         <h3>zzz</h3> 
         </div> 
        </div> 
        </div> 

       </div>  
     </div> 
     </div> 
    </div>

et css:

 .section{ 
      width: 100%; 
      height: 100%; 
      padding-top: 80px; 
      background-repeat: no-repeat; 
      background-attachment: fixed; 
      background-size: cover; 
      background: #fff; 
      } 

     #Fleet { 
      font-size: 1.2em; 
      text-align: center; 
      background: #0C142b; 
     } 

     #Fleet::after{ 
     content: ''; 
     position: absolute; 
     background: inherit; 
     z-index: -1; 
     bottom: 0; 
     transform-origin: left bottom; 
     transform: skewY(3deg); 


     .thumbnail { 
      border: 1px solid #0C142b; 
     } 

     .thumbnail>img, .thumbnail a>img { 
      margin-right: auto; 
      margin-left: auto; 
      border-radius: 4px; 
     }

reste des éléments utilise un css d'amorçage (comme rangée, récipient).

Maintenant, je voudrais avoir un biais au bas d'une page, mais il fonctionne pas ... effet similaire comme ici: http://www.hongkiat.com/blog/skewed-edges-css/ pouvez-vous me soutenir?

Source

2016-10-21 wisnia80

'.section.Fleet: après' qu'est-ce que c'est? Il n'y a pas un tel élément dans votre code html. Et lisez sur les pseudo-éléments. Vous avez besoin de deux colons. http://www.w3schools.com/css/css_pseudo_elements.asp – danny3b

Salut merci pour trouver une erreur. Hovewer aujourd'hui je reviens au sujet et fais quelques changements dans l'ordre de code et les classes. Je suis toujours à la recherche de la solution du même code isse - corrigé que vous pouvez trouver en haut, il a été édité. – wisnia80

@ danny3b [pas pour ': après.] (Https://www.w3.org/TR/selectors/#pseudo-elements) – Walf

#Fleet::after ruleset manque } et n'a pas display: block;. Il manque également des dimensions, par ex. width:100%;height:100%;

Source

2016-10-22 13:36:35 Walf

Incliner un fond d'arrière-plan de la page

Répondre

Questions connexes