前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >给网页添加自适应背景图

给网页添加自适应背景图

作者头像
今天风真的好大好大啊
发布2022-04-02 14:34:41
7190
发布2022-04-02 14:34:41
举报
文章被收录于专栏:白鸽小屋

有时候需要给网页加背景图,于是在网上找了一段CSS代码,上一篇利用JS转跳网址里面就加入了这段CSS

上一篇一开始的背景图代码是这个

代码语言:javascript
复制
<body background="https://www.baige.icu/2021/11/24/ea10908f9dba0.jpg">

但是直接引用JPG文件背景图不能自适应,晚上自习在想能不能用CSS来实现自适应,就找到了这个CSS代码,记录一下以防备用。

代码语言:javascript
复制
.all_bg{
                position:fixed;
                top: 0;
                left: 0;
                width:100%;
                height:100%;
                min-width: 780px;
                z-index:-10;
                zoom: 1;
                background-color: #fff;
                background: url(https://www.baige.icu/2021/11/24/ea10908f9dba0.jpg);
                background-repeat: no-repeat;
                background-size: cover;
                -webkit-background-size: cover;
                -o-background-size: cover;
                background-position: center 0;
            }

然后在<body>之间引用已下内容:

代码语言:javascript
复制
<divclass="all_bg"></div>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021 年 11 月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档