Question

我实际上是在尝试创建一个div，它是一个按钮的图像，当用户点击它时，就会执行一个函数。由于某种原因，div根本没有显示出来！我设置错误的世界是什么？

CSS：

#customizeButton
{
  background-image:url('images/customizeButton.png');
  position:absolute;
  top:35%;
  left:25%;
  width:370px;
  height:350px;
  background-repeat:no-repeat;
  -webkit-background-size:100% auto;
  z-index: 150;
}

HTML：

<div id ="customizeButton"></div>

它必须是CSS方面的东西。我有另一个“按钮”的相同代码，我用它作为退出按钮，但它使用文本字符而不是图像。它运作得很好......

以下是供参考的代码：

CSS：

#statSheetExitButton
{
  width: 40px;
  height: 40px;
  position: absolute;
  font-weight: bold;
  top: 17%;
  left: 74%;
  font-size: 150%;
  font-style: normal;
  color: black;
  z-index: 50;
}

HTML：

<div id ="statSheetExitButton">X</div>

同样，问题是为什么customizeButton没有出现。

编辑：答案问题是我在同一个文件夹中的另一个html文件中有我的初始Stat Sheet组件的html代码，而我的程序只是在监听该文件。

Answer 1

你绝对定位你的元素。您是否可以将其放置在相对定位元素的顶部，使其位于浏览器屏幕的视口之外。 使用Chrome，Firefox或Safari中的检查工具查找div 的位置。那会让你走上正轨。

Answer 2

这是您图片的正确途径吗？

background-image:url('customizeButton.png');

这仅在img与css位于同一目录中时才有效。

Answer 3

我认为你的div是空的，这就是为什么div没有显示，尝试在div中写一些文字或其他东西

Answer 4

我的想法：

display：block;丢失
你不需要背景重复（也不是-webkit-background-size），因为你给它一个高度＆amp;宽度
如果您只是定位此容器，则不需要z-index

Answer 5

确保您的按钮位于已定位的元素内，该元素本身并未隐藏。

我的简单按钮出了什么问题？

5 个答案: