如何在另一個div/span上繼續div的背景？

在我的網頁中我有一個背景和下面的塊我有一個應該繼續背景的按鈕。如何在另一個div/span上繼續div的背景？

這裏是一個例子。左圖是我的網頁現在的樣子，右圖是網頁的樣子。你可以看到背景在按鈕上繼續。

Example image of my problem.

我的代碼結構是這樣的：

<div id="section-1"> 
    <div class="shown-content"> 
    <div class="background"></div> 
    <div class="content"> 
     ... here are shown contents ... 
    </div> 
    </div> 

    <div class="hidden-content"> 
    ... here are hidden contents ... 
    </div> 

    <div class="button-content"> 
    <span class="button">FOLD OUT</span> 
    </div> 
</div>

的功能是，當你按一下按鈕，它觸發JQuery的slideToggle，它顯示/隱藏hidden-content股利。

我的想法是將按鈕背景設置爲與內容背景相同的寬度和高度，然後將其放在適當位置。但是我有點失落，因爲我找不到這樣做的任何方式，也許你知道更好的方法。

來源

2014-02-27 ilazgo

你可以做一個jsfiddle。淨，所以我們可以看到什麼是錯的。 :) – jycr753

jycr：有一個大圖顯示什麼是錯的！ ;） – Robert

假設您的圖片佔位符高度爲100像素，按鈕爲30像素。

假設您的按鈕始終位於主圖像div的中心。

然後，您需要一個130像素高的圖像，其中背景位置設置爲居中，而背景位置設置爲居中。

樣品

.imgdiv { 
    background-position: center top 
} 

.buttdiv { 
    background-position: center bottom 
}

如果你的按鈕在你需要調整的背景位置「中心」的一部分，使其成爲主圖像匹配中心

來源

2014-02-27 08:48:36 LGSon

我必須用JavaScript調整按鈕的位置和背景大小。但它的工作。 – ilazgo

你最初的想法是可能的最佳方案。

使用背景位置來正確定位你的div。

.button-content{ 
    background: url('') no-repeat 200 100%; 
}

編號AFER不重複是X位置ÿ的背景圖像的位置。

來源

2014-02-27 08:52:35 Obsidian

我發現這個解決方案，希望它能幫助你。

將摺疊按鈕絕對放在相對位置#section-1。
雖然將其放在絕對位置，但它只會佔用它所需的寬度。然後，我們使用僞類:before和:after填充左側和右側的空間，並使用背景顏色（在我的示例中爲白色）。

的HTML看起來像這樣（可擴展與其他代碼）：

<div id="section-1"> 
    <div class="hidden-content"> 
     hidden content 
    </div> 
    <div class="button"> 
     Fold out 
    </div> 
</div>

而CSS：

#section-1 { 
    min-height: 100px; /*use min-height so it will expand */ 
    background: url('pic.jpg'); 
    position: relative; 
    padding-bottom: 30px; /* height of .button */ 
    overflow: hidden; /* to hide the :before and :after */ 
} 
.button { 
    position: absolute; 
    bottom: 0; 
    right: 20px; 
    height: 30px; 
    width: 75px; 
    text-align: center; 
} 
.button:before, .button:after { 
    content: ' '; 
    background: white; 
    position: absolute; 
    width: 1000px; 
    left: -1000px; 
    height: 30px; 
} 
.button:after { 
    left: 100%; 
} 
.hidden-content { 
    display: none; 
}

並有demo。

來源

2014-02-27 09:15:12 LinkinTED

如何在另一個div/span上繼續div的背景？

回答

相關問題