一、需求:
在页面滚动时,背景图片保持不变,而不是跟随滚动。
二、解决方式:
使用背景固定定位,只需要在CSS中增加一个
background-attachment: fixed;
属性即可。
具体代码:
<div class="item_right">
<img src="images/image001_about@2x.png">
</div>
<style>
.item_right {
width: 60.75%;
height: 500px;
position: absolute;
right: 0;
background-image: url(../images/image001_about@2x.png);
background-repeat: no-repeat;
background-size: 60.75% 100%;
background-attachment: fixed; /* 这一行是重点 */
background-position: top right;
}
.item_right img {
max-width: 100%;
height: auto;
visibility: hidden;
}
</style>