显示背景图像时出现问题

Issues getting a background image to appear

本文关键字：问题 背景 图像 显示      更新时间：2023-09-26

我不确定为什么我不能让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>

问题是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 宽度和高度更改为图像宽度和高度......

在居中方面，只需使用：

background-position: center;

也就是说，我注意到它不在小提琴以前发布的页面上的中心。您可以使用 

margin:auto;

使<div>水平居中

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

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

相关文章：