请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

用css设置背景图片占全屏的正确打开方式

 
想要实现在网页背景中放置一张图片占满整个屏幕的效果吗?使用 CSS 就是一种非常简单易用的方法。本文将介绍如何使用 CSS 来设置背景图片占满整个屏幕,同时不重复显示。

[CSS] 纯文本查看 复制代码
body {
background-image: url('image.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

上述代码使用了三个关键字来控制背景图片的显示:background-image、background-size 和 background-repeat。

background-image: 设置背景图片的 URL。
background-size: 这一属性被用来将背景图片的大小缩放到适合整个屏幕。具体而言,cover 选项会将图片放大或缩小到完整地覆盖整个屏幕,而同时保持水平和垂直方向的整个图片完全可见。
background-repeat: 如果背景图片原尺寸过小,则有可能会重复出现,导致不美观。使用 no-repeat 选项,可以避免这种情况。
background-position: 该属性用来设置背景图片的位置。在这里,选项 center center 表示将背景图片的中心点居中在整个屏幕中间。
使用上述 CSS 代码,你可以在你的网页中轻松地将任何你喜欢的图片占满整个屏幕,并确保不会出现令人不愉快的重复效果。

回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。