博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css 背景图不拉伸自适应屏幕大小
阅读量:5833 次
发布时间:2019-06-18

本文共 563 字,大约阅读时间需要 1 分钟。

hot3.png

效果图

全屏:

背景图尺寸大于屏幕尺寸,背景图只显示跟屏幕一样大小内容

小屏时:

如效果图所示,图片并没有发生压缩、或者缩小比例,它只是显示跟屏幕尺寸大小的内容,至于如何控制缩小浏览器时图片的变化,可以使用css的

background-position:

属性来进行控制,它的部分可选参数值如下:

详细参数可自行查看api文档。

下面贴上代码

主要html代码:

        

使用position:fixed之后就可以通过设置width和height来控制div的宽高度了。

background: url('img/failure.jpg') no-repeat center center;
后面的no-repeat 表明图片文件不重复平铺,后面的center center表示当屏幕缩小时,图片在水平方向和垂直方向都居中显示。

页面的其他内容就可以全部都写在上面的div中了,不过这代码有些问题,因为最外层div已经使用了fix定位,已经脱离了文档流,如果有其他元素使用相对定位或者绝对定位会不会受到影响,我还没测试到。如果有更好的方法可以实现图片自适应屏幕的功能,请大家多多指教。

转载于:https://my.oschina.net/xiaoxinlin/blog/541072

你可能感兴趣的文章
33蛇形填数
查看>>
选择排序
查看>>
SQL Server 数据库的数据和日志空间信息
查看>>
前端基础之JavaScript
查看>>
自己动手做个智能小车(6)
查看>>
自己遇到的,曾未知道的知识点
查看>>
P1382 楼房 set用法小结
查看>>
分类器性能度量
查看>>
windows 环境下切换 python2 与 pythone3 以及常用命令
查看>>
docker 基础
查看>>
解决灾难恢复后域共享目录SYSVOL与NELOGON共享丢失
查看>>
eclipse集成weblogic开发环境的搭建
查看>>
写一个bat文件,删除文件名符合特定规则,且更改日期在某
查看>>
我的友情链接
查看>>
写Use Case的一种方式,从oracle的tutorial抄来的
查看>>
【C#】protected 变量类型
查看>>
Ubuntu解压
查看>>
爬虫_房多多(设置随机数反爬)
查看>>
藏地密码
查看>>
爬虫去重(只是讲了去重的策略,没有具体讲实现过程,反正就是云里雾里)...
查看>>