絕對定位與三個圖像

所以我有一個透明的圖像，我想放在圖像的頂部創建一個「淡出」效果。我也有一個背景圖片。所以這裏有三個圖像。絕對定位與三個圖像

這是我的代碼

<div class="jumbotron"> 
div class="hero-dashboard"> 
    <img class="center-block" src="../../img/hero-dashboard.png"> 
     <div class="fade-bottom"> 
     </div> 
</div> 


CSS 
.jumbotron{ 
     background-image: url('../img/hero-bg.jpg'); 
     background-repeat: no-repeat; 
     background-size: cover; 
.hero-dashboard img { 
       position: absolute; 
       z-index: 500; 
       height: 30px; 
       width: 500px; 
      .fade-bottom{ 
       background-image: url('../img/hero-footer-fade.png'); 
       position: absolute; 
       z-index:10; 
       bottom: 70%; 
       top: 10%; 
       right: 50%; 
       width: 100%; 
       } 
      } 
     }

他們都必須是「超大屏幕」 DIV中。它在頁面上，但它似乎並沒有聽取定位。誰能幫忙？

來源

2015-10-23 nd1990

你在使用sass嗎？ – abidkhanweb

1-父div（jumbotron）應該具有相對位置，當孩子是絕對的，並且應該有可見的高度和寬度。

.jumbotron { 
      background-image: url('../img/hero-bg.jpg'); 
      background-repeat: no-repeat; 
      background-size: cover; 
      position:relative; 
      top:0; 
      left:0; 
      width: 500px; 
      height:30px; 
      } // correct this closing tag 

    .hero-dashboard img { 
        position: absolute; 
        z-index: 500; 
        height: 30px; 
        width: 500px; 
        } //correct this 
    .fade-bottom{ 
        background-image: url('../img/hero-footer-fade.png'); 
        position: absolute; 
        z-index:10; 
        bottom: 70%; 
        top: 10%; 
        right: 50%; 
        width: 100%; 
        } 
      // } remove this 
      // } remove this

2-也是正確的開始標記<之前div class="hero-dashboard">

3-正確開口的順序和關閉tgas在CSS {}。他們看起來很奇怪！

來源

2015-10-23 05:10:43

感謝您的幫助。我關閉了這樣的CSS標籤，因爲我需要它們坐在jumbotron div類中。因爲它們是它的孩子。如果我錯了，請糾正我，但我的印象是這是正確的做法。

來源

2015-10-23 21:55:06 nd1990

絕對定位與三個圖像

回答

相關問題