您正在使用IPV4(35.168.110.128)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】多款云产品1折起,买云服务器送免费机器,最长免费续3个月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 中秋节 21
2022年 国庆节 42
2023年 元 旦 134
2023年 春 节 155
 
本类新增
本类热门文章
您现在的位置:首页 >> 数据库 >> 内容
CSS实现背景图片全屏铺满自适应的3种方式
内容摘要: 01margin:0px;background:url(images/bg.png)no-repeat;background-size:100%100%;background-attachment:fixed;url(images/beijing.png)——图片路径的位置;no-repeat——图片不重复;center0px——center是距离页面左边的......
01

margin:0px;

background:url(images/bg.png)no-repeat;

background-size:100%100%;

background-attachment:fixed;

url(images/beijing.png)——图片路径的位置;

no-repeat——图片不重复;

center0px——center是距离页面左边的定位,0px是距离页面上面的定位;

background-position:center0——就是图片的定位,同上;

background-size:cover;——把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中;

min-height:100vh;——视窗的高度,“视区”所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小。

02

background:url("bg.png")no-repeat;

height:100%;

width:100%;

overflow:hidden;

background-size:cover;//或者background-size:100%;

03

给body标签指定背景图,这样背景图就可以填充整个浏览器viewport了。其实,该方案对所有的块级容器都可以生效。块级容器的宽高是动态的,那么背景图将自动伸缩,充满整个容器。

cssbody标签的样式如下:

body{

/*加载背景图*/

background-image:url(images/bg.jpg);

/*背景图垂直、水平均居中*/

background-position:centercenter;

/*背景图不平铺*/

background-repeat:no-repeat;

/*当内容高度大于图片高度时,背景图像的位置相对于viewport固定*/

background-attachment:fixed;

/*让背景图基于容器大小伸缩*/

background-size:cover;

/*设置背景颜色,背景图加载过程中会显示背景色*/

background-color:#464646;

}

上一篇:mysql8.0.19忘记密码处理方法详 下一篇:PHP连接MySql数据库方法简化版
发布日期:2022/7/13
手机扫二维码直达本页
发布时间:14:40:07
点击:124
录入:齐天大圣
相关文章
Baidu

YiJiaCMS 6.3.1.220701(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022