0

在 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;
4

2 回答 2

0

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

于 2018-07-10T20:49:11.070 回答
-1

Looks like you can use background-size property, the 'cover' setting will cause the image to grow to fit the container.

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/

于 2018-06-19T00:23:56.977 回答