如何使图像在包含区域中重复答案

【问题标题】：how can i make an image repeat in a contained area如何使图像在包含区域中重复
【发布时间】：2018-06-19 00:06:51
【问题描述】：

在 tumblr 中有这种新类型的标题内容，您可以在其中包含一个带有背景的包含框，该背景会随着您滚动页面而滚动。但是我发现它在封闭区域中不起作用。我什么都试过了。下面是我的代码：

background-image: url(https://static.tumblr.com/cqouips/64cpa8678/cool-blue-fire-backgrounds-4013-hd-wallpapers.png);
background-attachment: fixed;
background-repeat: repeat;
font-size: 12px;
background-color: #000;
font-family: 'Quicksand', sans-serif;
color: #dbdbdb;
padding: 1px;
text-shadow: 1px 1px 0px #000, 1px -1px 0px #000, -1px -1px 0px #000, -1px 1px 0px #000, 0px 1px 0px #000, 0px -1px 0px #000, 1px 0px 0px #000, -1px 0px 0px #000;
padding: 6px 15px 6px 15px;
letter-spacing: 1px;
border: 2px double #f1f1f1;
text-transform: uppercase;
letter-spacing: 3px;
text-align: center;

【问题讨论】：

标签： html tumblr tumblr-themes

【解决方案1】：

删除background-attachment: fixed;

没有background-attachment: fixed：

.someClass{
  background-image: url(https://static.tumblr.com/cqouips/64cpa8678/cool-blue-fire-backgrounds-4013-hd-wallpapers.png);
background-repeat: repeat;
font-size: 12px;
background-color: #000;
font-family: 'Quicksand', sans-serif;
color: #dbdbdb;
padding: 1px;
text-shadow: 1px 1px 0px #000, 1px -1px 0px #000, -1px -1px 0px #000, -1px 1px 0px #000, 0px 1px 0px #000, 0px -1px 0px #000, 1px 0px 0px #000, -1px 0px 0px #000;
padding: 6px 15px 6px 15px;
letter-spacing: 1px;
border: 2px double #f1f1f1;
text-transform: uppercase;
letter-spacing: 3px;
text-align: center;
}

<div class="someClass" style="height: 2000px;">

</div>

background-attachment: fixed:

.someClass{
  background-image: url(https://static.tumblr.com/cqouips/64cpa8678/cool-blue-fire-backgrounds-4013-hd-wallpapers.png);
background-repeat: repeat;
background-attachment: fixed;/*do not use this*/
font-size: 12px;
background-color: #000;
font-family: 'Quicksand', sans-serif;
color: #dbdbdb;
padding: 1px;
text-shadow: 1px 1px 0px #000, 1px -1px 0px #000, -1px -1px 0px #000, -1px 1px 0px #000, 0px 1px 0px #000, 0px -1px 0px #000, 1px 0px 0px #000, -1px 0px 0px #000;
padding: 6px 15px 6px 15px;
letter-spacing: 1px;
border: 2px double #f1f1f1;
text-transform: uppercase;
letter-spacing: 3px;
text-align: center;
}

<div class="someClass" style="height: 2000px;">

</div>

【讨论】：

【解决方案2】：

看起来你可以使用 background-size 属性，'cover' 设置将导致图像增长以适应容器。

背景尺寸：封面；

<style>
div{background-image: url(https://static.tumblr.com/cqouips/64cpa8678/cool-blue-fire-backgrounds-4013-hd-wallpapers.png);
background-attachment: fixed;
background-repeat: repeat;
font-size: 12px;
background-color: #000;
font-family: 'Quicksand', sans-serif;
color: #dbdbdb;
padding: 1px;
text-shadow: 1px 1px 0px #000, 1px -1px 0px #000, -1px -1px 0px #000, -1px 1px 0px #000, 0px 1px 0px #000, 0px -1px 0px #000, 1px 0px 0px #000, -1px 0px 0px #000;
padding: 6px 15px 6px 15px;
letter-spacing: 1px;
border: 2px double #f1f1f1;
text-transform: uppercase;
letter-spacing: 3px;
text-align: center;

background-size:cover;
}
<style>
</head>
<body>
<div>
test <br />
test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />
</div>

https://css-tricks.com/almanac/properties/b/background-size/

【讨论】：

嗨。尽管链接很有用，但最好在您的答案中添加代码示例。这样，如果链接过期，代码仍然可供最终访问此页面的疲惫旅行者使用。