Question

在我的页面上，我在左上角有一个徽标，上面有重复的图像，并在页面的右侧延伸了一条横幅。使用背景图片可以很好地工作。

.logo {
    background: white url('img/logo-sml.png') center no-repeat;
    width: 81px; height: 62px;
    outline: 7px solid #D15F08;
    padding: 8px 2px;
    position: absolute; top: 15px; left: 15px;
}
.topstripe {
    background: transparent url('img/bg_top.png') repeat-x scroll 0 0;
    height: 39px;
    margin-left: 10px;
}

我的许多访问者都喜欢打印页面，我希望在打印时显示徽标和条纹。我已阅读了讨论单独的CSS打印页面的页面。如果我有重复的图像，这是我唯一的选择，还是有办法让IMG标签中的图像重复？

即像这样：

<img src="img/bg_top.png" style:"display: repeat-x"/>

但是以一种可以打印的方式。

Answer 1

我不确定是否可行。为了解决我的需要，我所做的就是按照上述CSS将图像放在顶部横幅中，然后添加了一个@media print属性，该属性对于打印版本来说“足够接近”：

.printtopstripe { visibility: hidden; }
@media print {
    .topstripe {
        background: none;
        height: 15px;
    }
    .printtopstripe { visibility:visible; height:17px; width:100%; }
}

如果有人提出了更好的解决方案，请发布它，我很乐意更改我的解决方案并选择他们的解决方案。

如何在img标签中重复图像（不是CSS背景图像）

1 个答案: