h5开发网站-css实现页面的背景固定定位

一、需求:

在页面滚动时,背景图片保持不变,而不是跟随滚动。

h5开发网站-css实现页面的背景固定定位_第1张图片

二、解决方式:

使用背景固定定位,只需要在CSS中增加一个background-attachment: fixed;属性即可。

具体代码:

<div class="item_right">
	<img src="images/[email protected]">
div>


<style>
	.item_right {
		width: 60.75%;
		height: 500px;
		position: absolute;
		right: 0;
		background-image: url(../images/[email protected]);
		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>

ok~

你可能感兴趣的:(CSS样式,网站开发,css,前端)