在包含div的邊界外放置背景圖像

我想將背景圖像設置爲在實際包含div之外。在包含div的邊界外放置背景圖像

<div class="expandable">Show Details</div> 

.expandable 
{ 
    background: transparent url('./images/expand.gif') no-repeat -20px 0px; 
}

所以「展開」圖片應該基本上出現在div的左側。

我不能得到這個工作，圖像不顯示何時它位於容器的邊界之外。我不確定是否有我缺少的CSS技巧，或者是否與我的頁面佈局有關（「可擴展」div嵌套在其他幾個div中）。

是否有可能做到這一點？任何提示？

編輯：這裏是一個展示的jsfiddle問題：link

來源

2010-08-23 fearofawhackplanet

你將不得不把背景圖像的單獨的元素中。背景圖像的位置不能將圖像放置在要應用的元素之外。

編輯你的問題慢跑我的記憶，我去檢查CSS規格。事實上，您可以設置一個「background-attachment」CSS屬性，它將背景錨定到視口而不是元素。然而，這是越野車或IE壞了，這就是爲什麼我找到了坐在「不使用」架在我的腦海:-)

編輯 —注意，這個答案是從2010年，和更新（更重要的是，廣泛支持）的CSS功能存在於2016年。

來源

2010-08-23 13:53:15 Pointy

很爛！哦，看起來像jQuery將不得不再次拯救我:) – fearofawhackplanet 2010-08-23 13:58:01

無論如何，「背景附件」的東西很奇怪，使用它可能比使用伴隨元素更麻煩。我懷疑你可以純粹用CSS來完成「background-attachment」的工作，因爲當你使用它時，定位值會引用窗口並且與元素無關。因此，你必須計算出這些座標應該是什麼，這似乎是一個很大的痛苦。 – Pointy 2010-08-23 13:59:40

你不能這麼做，但你有一個非常簡單的解決方案。你可以把其他的div .expandable喜歡裏面：

<div class="expandable">Show Details<div class="expandable-image"></div></div>

然後你的CSS看起來是這樣的：

.expandable{ position:relative; } 
.expandable-image{ 
    position:absolute; top:0px; left:-20px; 
    width:<width>px; height:<height>px; 
    background: url('./images/expand.gif') no-repeat; 
}

來源

2010-08-23 14:05:09

根據你的情況的細節，你也許可以用CSS3的border-image-* rules脫身。例如，我有效地將它們用於在yii中的CGridView小部件的過濾器行中放置「虛擬搜索按鈕」（單擊過濾器輸入框外部的任何位置將觸發ajax調用，但這些「按鈕」爲用戶提供了直觀的操作）。 ~~這對我來說是不值得的，因爲它只是爲了在其renderFilterCell（）方法中破解html而創建的CGridColumn小部件。~~ * - 我想要一個純粹的CSS解決方案。

.myclass .grid-view .items { 
    border-collapse: separate ; 
    } 

    .myclass .grid-view .filters td + td { 
    border-image-source: url("/path/to/my/img_32x32.png"); 
    border-image-slice: 0 0 0 100%; 
    border-image-width: 0 0 0 32; 
    border-image-outset: 0 0 0 40px; 
    border-width: 1px; 
    } 

    .myclass .grid-view .filters input { 
    width: 80%; 
    }

有涉及在邊界圖像寬度值的特技一點點 - 即32是乘法器不的長度（不把PX）在邊界寬度所使用的單元的（即1px）。結果是gridview的前n-1列中的僞按鈕。在我的情況下，在最後一列中我不需要任何東西，因爲它是一個沒有過濾器框的CButtonsColumn。無論如何，我希望這有助於人們尋找純粹的CSS解決方案＆＃x1F600; :-D

*寫完這個之後不久，我發現我可以在用於構造CGridColumn的數組的'filter'屬性中連接圖像的代碼，所以我的理由變得沒有實際意義。此外，似乎還有一個問題（無論如何，在Firefox中），即使指定了空格，邊界圖像重複也會被強制拉伸。儘管如此，也許這可能會派上用場的人＆＃x1F615; ： - \

來源

2013-04-01 13:12:33 Jeff

這絕對是太棒了，謝謝分享這麼多！我正在編寫一個Firefox插件，所以我按照我需要的方式在Firefox中工作，效果很棒！謝謝！ – Noitidart 2016-02-14 06:02:55

我知道這是一箇舊的線程，但我只是想更新它，並補充說這是可能的使用CSS僞元素。

.class:before { 
    content: ""; 
    display: inline-block; 
    width: {width of background img}; 
    height: {height of background img}; 
    background-image: url("/path/to/img.png"); 
    background-repeat: no-repeat; 
    position: relative; 
    left: -5px; //adjust your positioning as necessary 
}

來源

2014-08-21 16:38:41 Cypher909

在包含div的邊界外放置背景圖像

回答

相關問題