时间戳

首页 > 解决方案 > CSS x 重复背景避免不必要的截断

css - CSS x 重复背景避免不必要的截断

问题描述

我有一个水平重复的分隔线背景图像，如下所示：

在此处输入图像描述

.divider {
    background-image: url('https://i.stack.imgur.com/kMCJ6.png');
    background-repeat: repeat-x;
    height: 200px;
    width: 100%;
    display:block;
}
<div class="divider"></div>

但不可避免的是，根据浏览器窗口的宽度，我最终可以得到如下渲染：

在此处输入图像描述

有什么方法可以确保水平重复只突破背景图像中的空白？也就是说，有没有办法使用 CSS（可能还有一些 Javascript）来指定类似的东西，除非您可以在可见区域中放置整个重复图块，否则不要重复背景图像的副本？

标签： css

解决方案

如果您愿意在重复图像之间留有空格，可以使用
background-repeat: space：

.divider {
  background-image: url('https://i.stack.imgur.com/kMCJ6.png');
  background-repeat: space no-repeat;
  height: 200px;
  width: 100%;
  display: block;
}
<div class="divider"></div>

或者，您可以缩放图像以适应background-repeat: round：

.divider {
  background-image: url('https://i.stack.imgur.com/kMCJ6.png');
  background-repeat: round no-repeat;
  height: 200px;
  width: 100%;
  display: block;
}
<div class="divider"></div>

请注意，两者space和round默认情况下水平和垂直应用重复，所以如果你只想水平应用重复，你可以no-repeat作为第二个参数传递（如上所示）。

推荐阅读