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



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;

删除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>

看起来您可以使用背景大小属性,"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/

相关内容

  • 没有找到相关文章