为什么我的背景图片不显示？

我在我的页面上有一个我想要应用背景图像的按钮。为什么我的背景图片不显示？

当我有下面的代码，它不适用。谁能解释为什么？

.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

为什么我的背景图片不显示？

回答

相关问题