HTML/CSS - 填充區域的更改顏色

我有一個白色背景的內容div和一個底部有灰色背景的頁腳。身體背景顏色是淺灰色。HTML/CSS - 填充區域的更改顏色

<body> 
    <div class="content"> 
     <p>Content Div</p> 
    </div> 
    <footer class="site-footer"> 
      <nav> 
       <ul> 
        <li>Item 1</li> 
        <li>Item 2</li> 
        <li>Item 3</li> 
        <li>Item 4</li> 
       </ul> 
      </nav> 
    </footer> 
</body>

頁腳有頂部2px邊框。我的問題是我想改變邊界下方的背景顏色。基本上，我想要一個直接在邊界下面的25px區域來匹配身體的背景顏色。

這裏有一個JSFiddle

所以，我希望它去的白色，淺灰色，邊框，淺灰色，深灰色。

相反，它現在變成白色，淺灰色，邊框，深灰色。

這可能嗎？

任何幫助真的很感激。

來源

2015-04-03 Thomas Spade

你解釋說，以複雜的方式，預計發佈結果的截圖/樣機代替。 – 2015-04-03 06:34:34

您可以在fotter中使用背景圖像，1px寬度，25px高度，所需顏色，水平重複，放置在頂部。 – arkascha 2015-04-03 06:39:10

您是否考慮過使用具有邊距的水平線，並將其設置爲虛線和所需的顏色？ – 2015-04-03 06:57:13

不能指定填充顏色，但你可以使用:after實現這一目標：

.site-footer { 
    /** Don't forget to add this property **/ 
    position: relative; 
} 

.site-footer:after { 
    background-color: #F00; 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    z-index: 1; 
    height: 25px; 
}

這裏的JSFiddle

我用紅色，這樣你可以清楚地看到它被放置。

MDN docs for :after

來源

2015-04-03 06:38:23

感謝它的作品，但是當我把它放在我的網站上而不是直接放在我的頁腳下面時，它只是位於頁面的最頂部。任何想法爲什麼這樣？如果沒有，那就很難發佈整個網站的代碼。你讓我走上正軌。 – 2015-04-03 06:47:01

那麼你需要在''site-footer'上添加'position：relative'。它寫在答案中。 – 2015-04-03 06:47:56

完美，謝謝！ – 2015-04-03 06:49:16

我想你可能使用<hr />標記爲您在線 - 我相信這會更容易些，只是語義，因爲它是部分之間休息。

或者，我對Catalin有類似的想法，但是我使用了:before的僞邊框。

.site-footer { 
    position: relative; 
    border-top: 25px solid #EBEEEE; 
    background-color: #818181; 
    color: white; 
    padding: 30px 30px; 
} 

.site-footer:before { 
    content: " "; 
    position: absolute; 
    z-index: 5; 
    top: -25px; 
    left: 0; 
    right:0; 
    border-top: 2px dotted #999; 
}

這裏是一個jsfiddle

來源

2015-04-03 07:01:10

HTML/CSS - 填充區域的更改顏色

回答

相關問題