css加载一张图片 设置整个页面背景

前言

在css中,可以使用background-image或background属性来加载图片。这两个属性都可以配合url()函数来为元素设置背景图像。background-image属性为元素设置背景图像,而background是一个简化属性,可以在一个声明中设置所有背景样式,当然也包括背景图片。

一、常见的属性值

background-color:指定要使用的背景颜色

background-position:指定背景图像的位置

background-size:指定背景图片的大小

background-repeat:指定如何重复背景图像,一般设置no-repeat,表示不重复

background-origin:指定背景图像的定位区域

background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动

background-image:指定要使用的一个或多个背景图像

注意:元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。默认地,背景图像(background-image)位于元素的左上角,并在水平和垂直方向上重复。

以下是一个简单的例子,展示了如何使用CSS加载并显示一张图片:

二、style.css的样式文件

css 复制代码
        html {
            height: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            background-image: url('../images/1.jpg'); /* 替换为你的图片路径 */
            background-position: center; /* 图片居中 */
            background-size: cover; /* 图片覆盖整个元素 */
            background-repeat: no-repeat; /* 不重复图片 */
            height: 100%; /* 高度设置为100% */
        }

这段代码将确保图片设置为整个页面的背景,并且图片会根据需要缩放以覆盖整个元素区域,保持图片的中心,不会重复。

三、使用CSS3属性background-attachment

background-attachment属性则用于将背景图片与元素一起滚动,如果希望背景图片完全占据整个屏幕,可以将该属性设置为fixed让其在屏幕上固定。

css代码写法

css 复制代码
<style type="text/css">

        body {
            background-image: url("../images/1.jpg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            background-attachment: fixed;
        }
</style>

上面css代码的简化写法

css 复制代码
        body {
            background: url("../images/1.jpg") no-repeat center fixed;
            background-size: cover;
        }
相关推荐
Jagger_5 小时前
Cursor + Apifox MCP:告别手动复制接口,AI 助你高效完成接口文档开发
前端
IT_陈寒5 小时前
Redis性能优化:5个被低估的配置项让你的QPS提升50%
前端·人工智能·后端
Hilaku5 小时前
重新思考CSS Reset:normalize.css vs reset.css vs remedy.css,在2025年该如何选?
前端·css·代码规范
袁煦丞5 小时前
一图看懂Docker管理 Portainer:cpoar内网穿透实验室第652个成功挑战
前端·程序员·远程工作
右子6 小时前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
AGG_Chan6 小时前
flutter专栏--深入了解widget原理
开发语言·javascript·flutter
冰镇生鲜6 小时前
前端模拟 流式文本接口 打字机效果 mockStreamText
javascript
入秋6 小时前
Three.js后期处理实战:噪点 景深 以及色彩调整
前端·javascript·three.js
Asort6 小时前
JavaScript设计模式(七)——桥接模式:解耦抽象与实现的优雅之道
前端·javascript·设计模式
golang学习记6 小时前
从0死磕全栈之Next.js 应用中的认证与授权:从零实现安全用户系统
前端