我正在尝试在我的内容周围创建圆点边框。例如:
我已经通过重复图像(两个单独的点)成功实现了这一点。
.dots {
background: url('/images/dots.png'), url('/images/dots.png'), url('/images/dots.png'), url('/images/dots.png');
background-repeat: repeat-y, repeat-y, repeat-x, repeat-x;
background-position: right top, left top, right top, right bottom;
}
然而,这是一个不完美的结果。在某些尺寸上,点将开始重叠。
我不知道如何避免这个问题,因为图像不能无缝平铺。
我可以采取其他一些方法来达到不受这些错误影响的效果吗?
您可以使用径向渐变作为重复背景轻松地做到这一点,然后根据容器的高度/宽度调整值:
.dots {
width: 300px;
height: 200px;
padding: 60px 70px;
box-sizing: border-box;
background:
linear-gradient(#fff 0 0) content-box,
radial-gradient(circle at 12px 12px, #000 20%, #0000 22%) 12px 2px /33px 50px,
radial-gradient(circle at 12px 12px, #000 20%, #0000 22%) 33px 27px/33px 50px;
}
<div class="dots">
The content here
</div>
出现此问题的原因是您的背景图像没有屏幕那么宽,并且正在尝试重复自身。
background-size: cover
。这可以确保图像填满整个屏幕,这意味着它永远不会“环绕”。请注意,这会拉伸图像,从而根据宽高比出现一些扭曲。
如果担心失真,还有其他两种可能的解决方案:
background-repeat
。这是
background-size: cover
的示例:
.dots {
border: 5px solid black; /* For Snippet */
height: 50vh; /* For Snippet */
width: 50vw; /* For Snippet */
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Polka_dots.svg/1200px-Polka_dots.svg.png');
background-size: cover;
}
<div class="dots"></div>