Question

我在HTML代码中指定了一个div，然后在样式表中使用背景图像，高度，宽度和repeat-x值定义了div。我的图像没有重复。

如果我在HTML文件上指定了图片，但是它与网页上的重复图片重叠了，那么此方法就可以了。

CSS：

.header {
    height: 120px;
    width: 120px;
    display:block;
    background-image:url(logo.gif);
    background-repeat: repeat-x;
    background-size: contain;
}

HTML：

    <div class="header" id="header">          
        <!--<img src="logo.gif" name="logo" width="181" height="119" 
id="logo"/> -->
    </div>

预期结果是将我的logo.gif重复显示在页面x轴的右侧。实际结果（如上所述）是什么也没有发生。唯一的问题是，当我取消注释上面的HTML代码，然后图像重复时（尽管它是CSS图像重复，而不是HTML图像重复），并且它上面是HTML图像，下面是CSS图像重复，这看起来很奇怪，因为某些徽标从HTML图像中突出了。我试图通过注释掉HTML图像来解决此问题，因为希望CSS可以重复，但是注释掉HTML img标签时，CSS也会消失。

Answer 1

要获得所需的效果，首先要使div的width比height大，以查看x中的重复图像-axis 例如：

CSS：

.header {
    height: 120px;
    width: 460px; // <-- this needs to be bigger than height
    display:block;
    background-image:url(logo.gif);
    background-repeat: repeat-x;
    background-size: contain;
}

这里是：example

即使指定“ repeat-x”，机身上的图像也不会重复

1 个答案: