时间戳

首页 > 解决方案 > 有没有办法让 HTML 背景图像在高度改变后自动重复？

javascript - 有没有办法让 HTML 背景图像在高度改变后自动重复？

问题描述

我对 HTML 的背景图像样式有疑问。正如标题所说，如果可能的话，即使在 div 的高度发生变化后，我如何让 div 的背景图像继续重复？

例如，我有这个 div：

#corkboard {
    background-image: url('images-2/corkboard.jpg');
    min-height: 500px;
}

背景图片corkboard.jpg只是一个340*340大小的正方形，看起来像这样，当它被导入到corkboarddiv中时，它会自动重复并填充min-height: 500px部分， 网页现在看起来像这样。

但是，当我将子元素添加到 时corkboard，并且 div 高度自动延伸得比 长得多min-height: 500px，背景图像不会继续重复并填充新高度，它总是停留在min-height: 500px，与最初的样子相同，并且看起来像这样。

我知道它是如何cover工作的，但这不是我想做的，因为cover将那张图像拉伸以覆盖整个背景，并使质量变差。我正在寻找一种方法来保持自动重复更新与新的 div 大小。非常感谢你的帮助！

标签： javascripthtmlcss

解决方案

有background-repeat属性；共同的价值观是

在 x 和 y 轴上重复

background-repeat: repeat;

仅在 x 轴上重复

background-repeat: repeat-x;

仅在 y 轴上重复

background-repeat: repeat-y;

完全不重复

background-repeat: no-repeat;

推荐阅读