怎样给网站加入背景图片,网站插入背景图片

首页 > 实用技巧 > 作者:YD1662024-01-05 07:40:50

鼠标滚动可以放大缩小,但是背景不会。

hello大家好!今天分享如何在网页中设置背景图,并且把背景图给固定,不随着页面的缩放而改变图片的显示样式,类似于这样子。

在这个页面中提供了一些基础的元素和样式表,在body元素中也设置了背景图片。这个时候按住键盘的Ctrl键,滚动鼠标会发现背景图片和文字也会跟着放大和缩小,背景图片也会变成这种平铺的形式,这肯定不是所需要的。而且这样的背景图给用户的体验肯定不是很好的。

怎样给网站加入背景图片,网站插入背景图片(1)

所以这个时候要做的是什么?就是把图片给固定掉,不要让背景图跟随着鼠标的滚动放大缩小。

·这个时候可以采取在背景图中设置一下样式,这里可以设置一下背景图的初始位置为居中background,position为center。这个时候背景图片就会在这个窗口中处于居中的位置,从中间的位置去放置这张图片。

怎样给网站加入背景图片,网站插入背景图片(2)

·然后再设置一下背景图片,比如这样子会重复,它是重复的。所以这个时候可以设置一下它的repeat,background-repeat为no-repeat,这个时候就只剩下一张图片了,也就是不重复,这同样的也是不想要的效果。

怎样给网站加入背景图片,网站插入背景图片(3)

·这时候再设置一下它,在浏览器窗口中是一个固定的状态,可以设置一下background-attachment,然后把它固定掉,再保存看一下它的效果,但它还是跟随着放大缩小的。

·这个时候再设置图片,让它覆盖填充,拉伸填充整个画面。这时候可以设置一个size为cover,这个时候看到背景图片已经填充了整个窗口的面积,再来放大缩小看一下它,就不会出现那种背景跟随着页面放大,缩小而变化的这种情况。当然这样子来缩放图片,缩放这个窗口也会正常的去适配适应,这才是想要的背景图的设置效果。

怎样给网站加入背景图片,网站插入背景图片(4)

今天的分享到这里。

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.