Question

我不确定为什么我无法在下面的代码段中显示background-image。网址是正确的，我已经设置了图像的大小。另外，如何在页面中心对齐背景图像？我知道有像right top这样的属性，但我没有看到一个垂直和水平的中心。

感谢。

$("#arrow-icon").slideToggle(1000);

.arrow {
  height: 400px;
  width: 100%;
  background-color: blue;
  text-align: center;
}
#arrow-icon {
    padding-top: 100px;
    display: none;
    background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
    background-repeat: no-repeat;
    height: 50px;
    width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="arrow">
  <div id="arrow-icon">
   <!-- <img src="http://optimumwebdesigns.com/icons/down-arrow.ico"> -->
  </div>
</div>

Answer 1

问题是div比图片小。你可以使用background-size属性来解决这个问题

示例：

#arrow-icon {
    padding-top: 100px;
    display: none;
    background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
    background-repeat: no-repeat;
    height: 50px;
    width: 50px;
    background-size:100% 100%;
}

小提琴 - https://fiddle.jshell.net/800modgt/

或者您可以将div宽度和高度更改为图像宽度和高度......

Answer 2

就中心而言，只需使用：

background-position: center;

那就是说，我注意到它不是Fiddle之前发布的页面的中心。你可以使用

margin:auto;

将<div>水平居中

您可以考虑使用CSS3进行定位定位，因为它在更改div的位置以及滑出多远方面非常通用。这是一个JSFiddle。这是侧面动画，但它也适用于标准的上/下。

https://jsbin.com/yovaqo/edit?html,css,js,output

出现背景图像的问题

2 个答案: