Question

这是tumblr中这种新类型的标题，你有一个包含bg的框，当你滚动页面时它会滚动。但是我发现它在一个封闭的区域内不起作用。我已经尝试了一切。下面是我的代码：

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;

Answer 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>

Answer 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/

如何在包含的区域中重复图像

2 个答案: