爲什麼我的背景圖片不顯示？

我在我的頁面上有一個我想要應用背景圖像的按鈕。爲什麼我的背景圖片不顯示？

當我有下面的代碼，它不適用。誰能解釋爲什麼？

.form-file-upload .close { 
 
    display: block; 
 
    position: absolute; 
 
    top: -13px; 
 
    right: -13px; 
 
    width: 26px; 
 
    height: 26px; 
 
    font-size: 18px; 
 
    text-align: center; 
 
    line-height: 26px; 
 
    z-index: 3; 
 
    border: 0; 
 
    background: url(http://placehold.it/26x26) 0 0 no-repeat; 
 
}

<div class="form-file-upload"> 
 
    <button type="button" class="close"></button> 
 
</div>

來源

2017-07-27 michaelmcgurk

爲什麼你使用'的位置是：絕對的;'和'頂部和right'與'-13px' –

你上面的代碼工作，只需用'位置：相對;直接父母。 –

您已使用top:-13px，right:-13px和position:absolute屬性隱藏了您的按鈕。您的按鈕在左上角放置看到這樣的背景下被應用：

.form-file-upload .close { 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 26px; 
 
    height: 26px; 
 
    font-size: 18px; 
 
    text-align: center; 
 
    line-height: 26px; 
 
    z-index: 3; 
 
    border: 0; 
 
    background: url("http://placehold.it/26x26") 0 0 no-repeat; 
 
}

<div class="form-file-upload"> 
 

 
    <button type="button" class="close"></button> 
 

 
</div>

來源

2017-07-27 07:14:17 fen1x

這完美的作品！ :-) https://jsfiddle.net/p7octep1/8/ – michaelmcgurk

嘗試這一點，你需要設置position:relative;父DIV

.form-file-upload { 
 
    position:relative; 
 
} 
 
.form-file-upload .close { 
 
    display:block; 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
    width: 26px; 
 
    height: 26px; 
 
    font-size: 18px; 
 
    text-align: center; 
 
    line-height: 26px; 
 
    z-index: 3; 
 
    border: 0; 
 
    background: url(http://placehold.it/26x26) 0 0 no-repeat; 
 
}

<div class="form-file-upload"> 
 
    <button type="button" class="close"></button> 
 
</div>

來源

2017-07-27 07:13:37

感謝您的回答。我試圖在這裏實現這個代碼：https://jsfiddle.net/p7octep1/6/爲什麼它仍然不顯示的任何理由？ – michaelmcgurk

@michaelmcgurk關閉按鈕顯示右側，因爲我們將'right：0'設置爲'.close'類，無論如何你得到的答案感謝您的reivew –

.form-file-upload .close { 
 
    float: right; 
 
    width: 26px; 
 
    height: 26px; 
 
    font-size: 18px; 
 
    text-align: center; 
 
    line-height: 26px; 
 
    z-index: 3; 
 
    border: 0; 
 
    background: url(http://placehold.it/26x26) 0 0 no-repeat; 
 
}

<div class="form-file-upload"> 
 

 
<button type="button" class="close"></button> 
 

 
</div>

您的按鈕做工精細，但由於它定位不顯示

top: -13px; 
right: -13px;

您可以使用

float: right;

如果你想在右側。

來源

2017-07-27 07:19:43 Durga

它顯示在小提琴的右上角。

您正在使用top: -13px;和right: -13px;。如果你想讓按鈕出現在右上角，你應該將它們設置爲0。

頂部：

當位置被設置爲絕對的或固定的，top屬性指定了元件的頂邊緣與其包含塊的頂部邊緣之間的距離。 source

右：

當位置被設置爲絕對的或固定的，正確的屬性指定的元素的右邊緣和其包含塊的右邊緣之間的距離。 source

所以使用-13px將使其屏幕的一半爲top規則，就會溢出到屏幕的右側爲right規則

來源

2017-07-27 07:26:28

它顯示在上面&吧〜不隱藏:) 通常情況下，當設置爲 position: absolute, left & top will always be set 絕對位置將檢查其第一個相對（或絕對）父; 如果添加

.form-file-upload { 
    position: relative; 
}

你哈瓦一些變化〜

來源

2017-07-27 07:39:19 qs1210

爲什麼我的背景圖片不顯示？

回答

相關問題