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;
        }
相关推荐
社恐的下水道蟑螂几秒前
前端小彩蛋:纯 CSS 实现情侣小球互动,甜到齁的代码我扒下来了
css
前端踩bug工程师1 分钟前
flutter项目
前端
云枫晖1 分钟前
Webpack系列-SourceMap
前端·webpack
qq_420362039 分钟前
PDF导出服务
前端·pdf·状态模式·node·puppeteer
该用户已不存在12 分钟前
构建现代应用的9个Python GUI库
前端·后端·python
abiao198112 分钟前
VUE的“单向数据绑定” 和 “双向数据绑定”
前端·javascript·vue.js
LoveDreaMing21 分钟前
微前端-无界的实操和源码分析
前端·javascript·架构
修炼前端秘籍的小帅25 分钟前
精读《JavaScript 高级程序设计 第4版》第6章 集合引用类型(三)Map、WeakMap、Set、WeakSet
开发语言·javascript·ecmascript
去伪存真43 分钟前
「实测可行」Tailwind CSS 4 与 UnoCSS 最新配置全攻略:一把跑通不踩坑
前端
十八朵郁金香1 小时前
【H5工具】一个简约高级感渐变海报H5设计工具
前端·javascript·产品运营·axure·个人开发