Question

我有一个图像，我想在所有页面上将其作为页面标题打印在中心。我尝试了不同的方法，但图像与页面内容重叠。这是我的HTML和CSS。

HTML代码

<div class="pageHeader" align="center">
<img width="600" height="150" src="logo.jpg" alt="logo">
</div>

CSS

<style type="text/css" media="print">
div.pageHeader
{
  position: fixed;
  top: 0;
}

我尝试找到问题的完美解决方案，但我仍然无法解决。

Answer 1

最后，我自己想出了一个解决方案。

使用position:fixed标题徽标会与其下方的内容重叠。最好的方法是使用表格调整现有代码，并在css中使用thead { display: table-header-group; }

<强> CSS：

   <style type="text/css" media="print">
    #logo
    {
      thead { display: table-header-group; }
    }

Answer 2

你可以用这个：

<div id="header">
<img width="600" height="150" src="logo.jpg" alt="logo"/>
</div>

<style type="text/css" media="print">
#header {
    height: ...px;
    border: solid;
    margin-left: ...px;
}
img {
    margin-left: ...px;
    z-index:...;
    position:absolute;
}
</style>

Answer 3

尝试使用div上的background-image。我一直这样做。

<div class='header'></div>

css代码：

.header{
width:600px;height:150px;
background-image:url('logo.jpg');background-size:100% 100%;
}

现在你的image粘贴到div。检查它是否有效（：

如何使用css创建用于打印的页眉（图像）

3 个答案: