背景问题 - 扩展

Question

我有背景问题。 背景太过分了。这支笔上的图像宽500像素，但最初我的图像更大，大约1500像素？然而效果与笔相同。 无论图像在笔上的宽度如何都是如此。

我的代码

Answer 1

更改您制作的CSS如下：

而不是：

background-size:cover;

到

background-size:contain;

两者之间的区别在于＆＃39;覆盖＆＃39;将图像尽可能大地缩放以覆盖整个背景，但大多数情况下，图像不适合（大多数时候图像只是更大）。

使用＆＃39;包含＆＃39;当高度和宽度都适合背景时，它会将图像缩放到最大尺寸。

现在，如果您的图片小于页面，那么它将自行重复，除非您添加：

background-repeat:no-repeat;

我查看了你的codepen链接，图片太小，这就是为什么当你写下“不重复”的时候。部分它不会覆盖整个背景。

我建议您找到一张至少覆盖背景高度和宽度的图像。