当前位置:首页>实用技巧>

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

来源:原点资讯(m.360kss.com)时间:2024-01-05 07:40:50作者:YD166手机阅读>>

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

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

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

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

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

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

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

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

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

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

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

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

今天的分享到这里。

栏目热文

网站如何制作背景图(网站背景图生成)

网站如何制作背景图(网站背景图生成)

做新媒体的朋友,经常需要给文章或者视频制作封面,但是大多数人都很郁闷,没学过PS,不懂页面设计,更不知道怎么做封面图了?...

2024-01-05 07:48:49查看全文 >>

网站后台修改图片(公司网站后台怎样更换图片)

网站后台修改图片(公司网站后台怎样更换图片)

修改导航栏 常用操作 网站栏目管理 点击要更改的栏目 更改 修改栏目名称 点确定 一键更新 有的需要后台更新有的不需...

2024-01-05 07:58:20查看全文 >>

搭建网站设置动态背景(在网站开发中怎么插入背景图)

搭建网站设置动态背景(在网站开发中怎么插入背景图)

我们经常在一些发布会上都会看到这样炫酷的动态背景,好像整份PPT也不需要过多的润饰看起来就很高大上了,那么我们自己在PP...

2024-01-05 07:53:05查看全文 >>

北京理工大学mem工程管理硕士(清华大学mem工程管理硕士好不好)

北京理工大学mem工程管理硕士(清华大学mem工程管理硕士好不好)

2024考研 | 北京理工大学2024年工程管理硕士(MEM)招生说明 林晨考研北京一、项目介绍【院校属性】:985、2...

2024-01-05 07:14:57查看全文 >>

mem工程管理硕士要考哪些专业(mem工程管理硕士考哪几科)

mem工程管理硕士要考哪些专业(mem工程管理硕士考哪几科)

MEM工程管理硕士是近几年报考热门专业,报考人数逐年增加,因为难度和性价比相对于其它项目都更有优势一些。吸引了广大搞技术...

2024-01-05 07:41:56查看全文 >>

怎么才能获得永久全皮肤(怎么才能永久绝毛)

怎么才能获得永久全皮肤(怎么才能永久绝毛)

《英雄联盟》是一款备受欢迎的多人在线对战竞技游戏,其中皮肤作为游戏中的装饰品,可以为英雄增添独特的外观和效果。许多玩家都...

2024-01-05 07:43:43查看全文 >>

怎么卡出全部皮肤(怎么卡全皮肤教程)

怎么卡出全部皮肤(怎么卡全皮肤教程)

王者荣耀全英雄全皮肤翻出来怎么参与?在王者荣耀今天开启的“全英雄全皮肤翻出来”活动中,我们只要获取3张“荣耀共创卡”就有...

2024-01-05 07:30:53查看全文 >>

卡出永久皮肤的教程(最新卡皮肤教程)

卡出永久皮肤的教程(最新卡皮肤教程)

王者荣耀:玩家意外发现天美bug,皮肤体验卡竟能卡出永久皮肤?hello大家好,我是风哥。老夫我看你骨骼惊奇,未来必定能...

2024-01-05 07:35:42查看全文 >>

日产骐达5年15万公里保养(日产骐达三年四万公里保养哪些)

日产骐达5年15万公里保养(日产骐达三年四万公里保养哪些)

今天给大家分析一下骐达这款车的保养费用,看看这款骐达2021款 1.6L 手动乐动版,它的日常保养费用到底需要花费多少。...

2024-01-05 07:56:16查看全文 >>

骐达6万公里需要购买什么

骐达6万公里需要购买什么

日产骐达和本田飞度都是非常优秀的车型,但在细节上存在一些区别。首先,骐达的市场优惠目前在14,000左右,售价在76,0...

2024-01-05 07:51:14查看全文 >>

文档排行