时间戳

首页 > 解决方案 > 如何在 img 标签中重复图像（不是 CSS 背景图像）

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

问题描述

在我的页面上，我在左上角有一个徽标，上面有一个重复的图像，创建了一个延伸到页面右侧的横幅。他们使用背景图像很好地工作。

.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"/>

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

标签： htmlcss

解决方案

我不确定这是否可能。为了解决我的需求，我所做的就是按照上面的 CSS 将我的图像留在顶部横幅中，但随后添加了一个@media print对于打印版本“足够接近”的属性：

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

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

推荐阅读