Question

有人能指出我正确的方向吗？我不明白为什么我不能将black_bottom.png作为圆角的背景。

@charset "utf-8";

/* CSS Document */

html,
body {
  color: #444141;
  font-family: 'trebuchet ms' !important;
  font-size: 12px;
  margin: 0px;
  padding: 0px;
  height: 100%;
  background: #eaeade;
}

.justyParagraph {
  text-align: justify;
}

a img {
  border: 0;
}

.clearer {
  clear: both;
}

.rounded_corners {
  background: url(../images/box/black_bottom.png) no-repeat left bottom;
  color: #FFF;
  padding: 8px;
  width: 380px;
  border: 2px solid #4e4b4b;
  height: 450px;
}

div#blockdark {
  height: 517px;
  left: 450px;
  position: absolute;
  top: 130px;
  z-index: 1000000;
  width: 360px;
  visibility: visible;
}

<div id="blockdark">
  <div class="rounded_corners">
    Content
  </div>
</div>

这是一个例子，也许它与rounded_corners类的JavaScript有关？

http://www.coldcharlie.nl/test

Answer 1

确保../images/box/black_bottom.png是样式表到图像文件的路径。其他一切看起来都是正确的，但人们并不总是意识到路径是相对于css文件而不是包含它的页面。

在那里尝试绝对网址，然后查看是否显示。如果是，则表示您的相对URL不正确。

Answer 2

或者：

您的图片在此相对路径中不存在：../ images / box / black_bottom.png。

OR：

您的图片为空白。

OR：

图像左下角的空白区域比div.rounded_corners的尺寸多，因此背景图像会“超出”你的div。

Answer 3

嗨......

这可能会让你看到......

<html>
<head>
<style type="text/css">
    #mydiv{
        background-image:url('http://www.theregister.co.uk/Design/graphics/std/logo_414_80.png');
    }
</style>
</head>
<body>
<div id="mydiv">
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
</div>
</body>
</html>

只是为了让你开始。

此外，您的div＃blockdark无法验证 - 请改用#blockdark ......

（id应该是唯一的，因此标签类型无关紧要）

我不能在我的div的背景下得到这张照片

3 个答案: