有没有办法使用重复图像创建平铺背景而不拉伸和改变大小?
我有一个模式,我用作背景。但是我想在整个网站上一致地显示它。目前,模式正确重复,但根据容器的大小延伸。
是的,您可以使用属性background-repeat
body {
background-image: url("images/background.jpg");
background-repeat: repeat;
}
它会拉伸,因为当容器具有不同的大小时,您不会更改背景的宽度和高度
值重复:背景图像垂直和水平重复
使用值repeat-x:水平重复背景图像
使用值repeat-y:垂直重复背景图像
我希望它有所帮助。
仅供参考其他可能发现自己遇到此问题的人...
这是因为我使用的是SVG。更改为常规图像文件,现在一切都很好。
使用下面的css:
div{
background-image: url("images/background.jpg");
background-size:auto auto;
background-repeat:repeat;
}
<!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>