CSS实现网页背景图片自适应全屏,可以让网页背景更加美观,使整个网页更加具有吸引力。
body { background: url(图片地址) no-repeat center center fixed; -webkit-background-size: cover; /* Safari 和 Chrome */ -moz-background-size: cover; /* Firefox */ -o-background-size: cover; /* Opera */ background-size: cover; /* 其他浏览器 */ }
通过设置背景图片的地址,然后使用CSS中的background属性,将背景设置为该图片,no-repeat保证图片不重复,center center保证图片居中显示,fixed属性让图片随着页面滚动而不移动。
为了使图片自适应全屏,需要使用background-size属性。-webkit-、-moz-、-o-、background-size分别是兼容Safari、Chrome、Firefox和Opera浏览器的写法,最后的background-size设置则是适用于其他浏览器的写法。cover则是让图片自动缩放以填满整个容器,直到连续完整显示整个图片为止。
通过使用以上CSS代码,就可以实现网页背景图片自适应全屏的效果了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。