根据浏览器大小重复显示图像

用户名

所以我想在我的页脚上方从左到右填充草。我很难让它重复一遍。我将位置设置为固定,然后也将其设置为浮动:左但仍然没有运气。我只会不断地在HTML中添加更多的硬编码图像,但是我觉得我可以使用CSS做到这一点,而没有100行额外的代码。另外,如果用户使浏览器更大或更小,我希望图像增大或缩小。

现场演示

的HTML

<figure>
        <img src="arrow.png" alt="arrow" class="arrow">
        <p class="clickHere"> Click one! </p>

        <img src="downwardmonkey.png" alt="down" class="head">
        <img alt="down" class="footer">
    </figure>

的CSS

figure img.footer
{
    position: fixed;
    bottom: 45px;
    float: left;
    background-image: "grass.png";
    background-repeat: repeat-x;
}

如果需要任何其他代码来帮助让我知道!

安库尔·阿格瓦尔(Ankur Aggarwal)

而不是放置图像标签,而是放置一个div并为其提供背景图像

   <figure>
        <div class="grassImageDiv"></div>
   </figure>

CSS:

.grassImageDiv
{
    display: inline-block;
    background-image: url("grass.png");
    width:100%; //To make it browser size independent
    height: 80px;
}

您可以根据需要指定高度和宽度。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

根据浏览器大小在div中缩放图像

来自分类Dev

PHP在浏览器上显示图像

来自分类Dev

浏览器将不显示图像

来自分类Dev

鼠标悬停时突出显示图像部分,以响应浏览器大小变化

来自分类Dev

在浏览器大小上按行调整图像大小

来自分类Dev

图片无法根据浏览器大小动态定位

来自分类Dev

Titleblock英雄根据浏览器大小缩放全高

来自分类Dev

CSS窗口根据浏览器高度调整大小

来自分类Dev

根据浏览器大小添加和添加内容

来自分类Dev

Jumbotron无法根据屏幕/浏览器大小进行调整

来自分类Dev

根据CSS中的浏览器大小更改背景颜色

来自分类Dev

调整浏览器大小时大图像会移动

来自分类Dev

当浏览器水平调整大小时,图像缩小

来自分类Dev

基于浏览器大小的图像缩放不起作用

来自分类Dev

调整浏览器大小时,大图像会移动

来自分类Dev

CSS-在Outlook浏览器中设置图像大小

来自分类Dev

图像在浏览器之间改变大小

来自分类Dev

使用JavaScript从iframe中检测浏览器,并根据浏览器显示不同的<div>内容?

来自分类Dev

CSS网格在浏览器中显示不同的大小

来自分类Dev

如何使用全CSS显示在浏览器窗口中调整大小并流动的全尺寸图像网格

来自分类Dev

下载动态生成的图像,而不是在浏览器中显示

来自分类Dev

保存网络浏览器中显示的图像

来自分类Dev

使用php在浏览器中显示图像

来自分类Dev

为什么图像没有显示在浏览器上?

来自分类Dev

在浏览器中不显示图像-React

来自分类Dev

Rails上的图像未显示在我的浏览器中

来自分类Dev

图像显示在不同的地方,取决于浏览器

来自分类Dev

SVG 图像在浏览器中的显示方式不同

来自分类Dev

如何根据浏览器的大小调整自适应AdSense单元的大小

Related 相关文章

  1. 1

    根据浏览器大小在div中缩放图像

  2. 2

    PHP在浏览器上显示图像

  3. 3

    浏览器将不显示图像

  4. 4

    鼠标悬停时突出显示图像部分,以响应浏览器大小变化

  5. 5

    在浏览器大小上按行调整图像大小

  6. 6

    图片无法根据浏览器大小动态定位

  7. 7

    Titleblock英雄根据浏览器大小缩放全高

  8. 8

    CSS窗口根据浏览器高度调整大小

  9. 9

    根据浏览器大小添加和添加内容

  10. 10

    Jumbotron无法根据屏幕/浏览器大小进行调整

  11. 11

    根据CSS中的浏览器大小更改背景颜色

  12. 12

    调整浏览器大小时大图像会移动

  13. 13

    当浏览器水平调整大小时,图像缩小

  14. 14

    基于浏览器大小的图像缩放不起作用

  15. 15

    调整浏览器大小时,大图像会移动

  16. 16

    CSS-在Outlook浏览器中设置图像大小

  17. 17

    图像在浏览器之间改变大小

  18. 18

    使用JavaScript从iframe中检测浏览器,并根据浏览器显示不同的<div>内容?

  19. 19

    CSS网格在浏览器中显示不同的大小

  20. 20

    如何使用全CSS显示在浏览器窗口中调整大小并流动的全尺寸图像网格

  21. 21

    下载动态生成的图像,而不是在浏览器中显示

  22. 22

    保存网络浏览器中显示的图像

  23. 23

    使用php在浏览器中显示图像

  24. 24

    为什么图像没有显示在浏览器上?

  25. 25

    在浏览器中不显示图像-React

  26. 26

    Rails上的图像未显示在我的浏览器中

  27. 27

    图像显示在不同的地方,取决于浏览器

  28. 28

    SVG 图像在浏览器中的显示方式不同

  29. 29

    如何根据浏览器的大小调整自适应AdSense单元的大小

热门标签

归档