Question

有没有办法使用重复图像创建平铺背景而不拉伸和改变尺寸？

我有一个模式，我用作背景。但是我想在整个网站上一致地显示它。目前，模式正确重复，但延伸取决于容器的大小。

Answer 1

是的，您可以使用属性background-repeat

localhost:9000

它拉伸，因为当容器具有不同的大小时你不会改变背景的宽度和高度

值重复：背景图像垂直和水平重复

值为repeat-x：背景图像水平重复

值为repeat-y：背景图像垂直重复

我希望它有所帮助。

Answer 2

仅供参考其他可能发现自己遇到此问题的人...

这是因为我使用的是SVG。更改为常规图像文件，现在一切正常。

Answer 3

使用下面的css：

div{
  background-image: url("images/background.jpg");
  background-size:auto auto;
  background-repeat:repeat;
 }

Answer 4

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<style>
    div{
        background:url('https://www.w3schools.com/w3css/img_fjords.jpg') repeat center;
        height:2000px;
        border:2px solid red;
        background-size:contain
    }
</style>
</head>
<body>

<div></div>

</body>
</html>

无需拉伸即可重复CSS背景图像

4 个答案: