分享更有价值
被信任是一种快乐

如何使用CSS实现响应式全屏背景图

文章页正文上

小编给大家分享一下如何使用CSS实现响应式全屏背景图,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!使用background-size 属性,填充整个viewport.css属性background-size 值为cover时,浏览器会自动按比例缩放背景图的宽和高,直到大于或等于viewport的宽和高.使用媒体查询为移动设备提供更小尺寸的背景图为什么要给移动设备提供小尺寸背景图呢?在demo中,我们看到的背景图的实际尺寸为5498px * 3615px,使用这么大尺寸图片的目的是满足绝大多数宽屏显示器,并且不会显示模糊,而代价就是1.7MB的图片体积。但是在移动设备上没有必要使用这么大的图片,同时大图还会导致加载变慢,尤其是在移动网络下。需要说明的是:为移动设备提供小背景图对该技术方案来说是可选的。实践HTML …Your content goes here…后面我们会给body标签指定背景图,这样背景图就可以填充整个浏览器viewport了。其实,该方案对所有的块级容器都可以生效。如果你的块级容器的宽高是动态的,那么背景图将自动伸缩,充满整个容器。CSS body标签的样式如下:body {/* 加载背景图 */background-image: url(images/background-photo.jpg);/* 背景图垂直、水平均居中 */background-position: center center;/* 背景图不平铺 */background-repeat: no-repeat;/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */background-attachment: fixed;/* 让背景图基于容器大小伸缩 */background-size: cover;/* 设置背景颜色,背景图加载过程中会显示背景色 */background-color: #464646;}上面最重要的一条就是:background-size: cover;这样浏览器就会按比例缩放背景图直至背景图宽高不小于免费云主机、域名容器的宽高(在上面的例子中,就是body标签)。这里需要注意的一点就是:如果背景图小于body标签的尺寸(例如在高分辨率显示器上,或页面内容特别多时),浏览器会拉伸图片。我们都知道,当把一个图片拉伸时,图片会变模糊。因此,在选择背景图时,要特别注意尺寸。为了照顾到大尺寸屏幕,demo里用的图片尺寸为5498px * 3615px 同时,为了让背景图始终相对于viewport居中,我们声明了:background-position: center center;上面的规则会把背景图缩放的原点定位到viewport的中心。接下来我们需要解决的问题是:当内容的高度大于viewport的高度时,会出现滚动条。我们希望背景图始终相对于viewport固定,即使用户滚动时也是一样。解决办法就是:background-attachment: fixed;(可选)使用媒体查询应对小屏幕为了应对小屏幕,我用photoshop将背景图按比例缩放到768px * 505px,然后通过smush.it 压缩图片体积。这样就将图片体积从1741KB降到114KB,节省了93%下面是媒体查询的写法:@media only screen and (max-width: 767px) { body { background-image: url(images/background-photo-mobile-devices.jpg); }}上面的媒体查询将max-width: 767px 设为断点,也就是说当浏览器viewport大于767px时,会使用大背景图,反之使用小背景图。使用上面媒体查询不利的一面是,如果你把浏览器窗口从1200px缩小到640px(反之亦然),你会看到一个短暂的闪烁,因为小背景图或大背景图正在加载。看完了这篇文章,相信你对“如何使用CSS实现响应式全屏背景图”有了一定的了解,如果想了解更多相关知识,欢迎关注云技术行业资讯频道,感谢各位的阅读!

相关推荐: javascript的引用方式有哪些

这篇文章主要讲解了“javascript的引用方式有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript的引用方式有哪些”吧! JavaScript的引用方式:1、行内引用,通过标签中的事件属…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册