Question

我正在努力在页面上使用图像实现页面边框。边框应该贴在我的网页两侧，但图像没有显示。然而，用纯色背景颜色替换图像确实有效。我使用下面的代码：

#top, #bottom, #left, #right {
  position: fixed;
}
#left, #right {
  top: 0; bottom: 0;
  width: 15px;
}
#left { 
  left: 0;
  background-image: url("border-left.png");
}
#right {
  right: 0;
  background-image: url("border-right.png");
}

#top, #bottom {
  left: 0; right: 0;
  height: 15px;
}
#top {
  top: 0;
  background-image: url("border-top.png");
}
#bottom {
  bottom: 0;
  background-image: url("border-bottom.png");
}

@media 
only screen and (max-width: 500px),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) 

{
  #top, #bottom, #left, #right { display: none; }
}

正如我所说，将background-image: url("border-left.png");替换为``background：＃000;工作得很好。

任何人都有想法解决图像没有正确显示的问题吗？

至于HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">

</head>

<body>

<!-- Borders -->
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>


<div id="wrapper" class="toggled">


    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <p>Content</p>
        </div>
    </div>
    <!-- /#page-content-wrapper -->

</div>
<!-- /#wrapper -->

</body>

</html>

显示顶部和左侧图像（但不正确），底部和右侧图像完全省略。

Answer 1

使用浏览器的开发人员工具将显示元素（#right等）没有高度或没有宽度。这些需要配置，以便元素的背景显示。

例如，块级元素（例如div）默认会在浏览器宽度上延伸，但没有任何内容，将具有零高度。

使用CSS的页面图像边框

1 个答案: