HTML如何设置背景图片？有几种设置背景图片的办法？

已于 2025-04-20 09:56:45 修改
阅读量4.9w 收藏 119
点赞数 46
分类专栏： HTML 文章标签： html 前端 算法 开发语言
于 2024-01-14 18:31:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69824302/article/details/135586566
版权
本文介绍了如何在HTML和CSS中设置网页背景图片，包括直接在`<body>`标签内设置的简单方法，以及使用CSS通过`background-image`属性实现的高级设置，重点讲解了如何避免图片平铺并使其居中且自适应屏幕。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

我们在编辑网页时，如果觉得网页过于单调，这时便可以加上一张自己喜欢的背景图。这篇文章中，W3Cschool 小编给大家介绍下 HTML 中如何设置背景图片，分别有哪几种设置背景图片的方法。

方法一、HTML中设置背景图片

HTML中的<body></body>标签内可直接设置背景图片。具体代码如下：

<body background="图片路径">

效果展示：

backgroundimage

直接用<body></body>设置背景图片的话，浏览器会根据你图片的大小，铺满整个屏幕。若不想平铺图片，还需要进行另外的 CSS 设置。此方法较为麻烦。

方法二：CSS 设置背景图片

CSS 设置背景图片的方式与 HTML 设置背景图片的方式大体一致，具体代码如下：

<style type="text/css">
    body{
	    background: url("图片地址");             
	}
</style>

到目前为止，图片还是会重复铺满整个屏幕。

我们需要在进行添加 CSS 样式进行优化。

<style type="text/css">
	body{
		background: url("图片地址") no-repeat center center fixed;
                /*兼容浏览器版本*/
                -webkit-background-size: cover;
                -o-background-size: cover;                
                background-size: cover;
	}
	</style>

最终效果如下：

bgimg

HTML 插入图片（简单易懂较详细）
m0_74107848的博客
03-08 1695
在 HTML 中插入图片非常简单，通过<img>标签和其属性可以实现各种功能。属性名描述示例src指定图片的路径alt为图片提供替代文本<img alt="示例图片">width指定图片的宽度height指定图片的高度title为图片添加额外的信息<img title="这是一个示例图片">style为图片定义内联样式">class为图片添加类名id为图片添加唯一标识符loading实现图片懒加载srcset指定不同分辨率的图片路径sizes指定不同屏幕宽度下的图片尺寸。
HTML背景图片的设置
weixin_43183219的博客
01-05 3万+
背景图片的设置，背景图片大小、位置、是否重复以及附着点的问题
css 设置全屏背景图片
09-25
在HTML中，当我们设置背景图，只能采用是否重叠、居中、重叠方向这几个选项
css代码添加背景图片常用代码
07-25
css代码添加背景图片常用代码
HTML背景图设置
m0_63843858的博客
03-07 1976
首先要注意的是背景图的大小，如果需要背景图填满整个盒子，并且只要一张的话，可以先通过背景图的缩放来调节背景图片的大小，再设置只要一张。
HTML图片设置成为页面背景 （ 五个小步骤）
不会倒下的白岩松
10-16 2万+
会杂七杂八的解决一些代码报错的程序员
html的背景图片设置
wenqi1的博客
08-28 1万+
背景颜色：background-color，可用rgb、rgba、#off等进行设置 背景图片：background-img，可用网址或图片存放地址进行设置 平铺方式： background-repeat:repeat，在背景上只出现一张图片，没有设置宽高时全屏铺满 background-repeat:repeat-x，横向铺满 background-repeat:repeat-y，纵向铺满 关联方式： background-attachment:scroll 默认 backg...
HTML设置图片为页面背景
热门推荐
世纪末的架构师的博客
12-06 12万+
HTML设置图片为页面背景： 问题： 在HTML页面中不使用CSS盒模型的前提下如何将一张图片设置为页面背景？ 方法： 在< body >中使用background以及style来设置 例： 在这里我把html格式的文件和jpg格式的图片文件都放到了桌面上 <html> <head> <meta content="text/html" charset="UTF-8"> <title>HTML设置图片为页面背景</
HTML如何设置背景图片？设置背景图片方法详解
ZHOUPUYU的博客
03-14 5917
我们在编辑网页时，如果觉得网页过于单调，这时便可以加上一张自己喜欢的背景图。这篇文章中，小编给大家介绍下 HTML 中如何设置背景图片，设置背景图片方法的详解。
前端必知必会-html背景图片设置
最新发布
qq_24018193的博客
07-23 2832
本文介绍了的使用，如有问题欢迎私信和评论。
HTML背景图片设置
zhiyinweini3的博客
02-19 8789
背景：学习前端知识，自己做页面 目的：学习前端知识 组网图：不涉及 工具：vscode1.41.0 简介：HTML背景图片设置； HTML背景图片设置background-image： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&gt...
css为图片设置背景图片
10-30
本话题主要探讨如何使用CSS为页面中的图片设置背景图片，这是一个有趣且实用的技术点。 首先，我们要明白在网页中，图片通常有两种用途：一种是作为内容展示，例如产品图片、文章配图，这类图片我们通常使用`<img>`...
css3实现一个div设置多张背景图片及background-image属性实例演示
09-27
在CSS3中，`background-image`属性极大地扩展了对背景图片处理的能力，使得在一个单一的HTML元素（如div）上设置多个背景图片成为可能。这个特性显著提高了网页设计的灵活性和创意性，减少了以往需要通过嵌套div来...
html form背景图片设置,input 提交表单按钮 背景图片的完美设置
weixin_35755562的博客
06-05 2812
import java.awt.*;import javax.swing.*;public class TestBackgroundColor extends JFrame {public static void main(String[] args) {TestBackgroundColor tbc = new TestBackg...首先你先将一个.png的背景图片存入工程中res/dra...
QWidget设置窗口背景图片的几种方法
fearlazy
02-17 2万+
文章可能被更新，最新地址：http://www.fearlazy.com/index.php/post/112.html 软件的界面为了更直观或美观，常常需要通过图片来表达。我们知道Qt中所有界面类的祖先是QWidget，因此学会给QWidget设置图片是必须掌握的技能之一。但是编程是没有标准答案的，达到同一效果可以有许多不同的方法。那么给窗口设置背景图片又有多少种方法呢？接下...
HTML分层文字背景图片,如何让文字作为CSS背景图片显示？
weixin_34997593的博客
06-10 906
在实际开发中，有时候希望文字内容可以作为背景图片显示，一方面是希望利用背景图片的优势，例如可以平铺，另外一方面是常见的替换元素不能使用伪元素创建文字，此时只能寄希望与背景图。关键如何把文字变成背景图呢？通常CSS开发人员的做法是把文字导出来转换成图片，然后作为背景图显示，但是这样成本有些高，也不利于日后的维护。这里给大家介绍一种实用的技术，可以让文字作为CSS背景图片。一、SVG本质上就是一个图像...
用CSS制作登录界面
Wake_me_Up123的博客
07-22 1247
插入图片的方法在html代码段的style标签中对直接对body元素进行设置，可以直接插入一张图片作为背景，例如： body{background-image:url(G:/test.com/bj.jpg);//url中放置图片的位置地址； background-repeat:no-repeat;设置背景重复属性为“不重复”； background-size:100% 100
html加载背景图片
浪子四方
06-18 1878
html加载图片<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hello world</title> </head> <body> <img src="ima
html设置背景图
qq_63311302的博客
05-18 1万+
html设置背景图其实很简单，我们一起来看看吧！相信看完你也就会了。 body标签的background属性 我们先来看看源代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body background="C:/dopt/1.jpg"> </body> &...
css的几种设置背景图片的方法
06-08
CSS 可以通过以下几种方式来设置背景图片： 1. 使用 background-image 属性，将图片路径作为属性值，例如： ``` body { background-image: url("example.jpg"); } ``` 2. 将图片作为 HTML 元素的背景，使用 background 属性，例如： ``` <div style="background: url('example.jpg')"></div> ``` 3. 使用 CSS3 中的 background-size 属性，可以调整背景图片的大小和位置，例如： ``` body { background-image: url("example.jpg"); background-size: cover; background-position: center; } ``` 4. 通过 ::before 和 ::after 伪元素来设置背景图片，例如： ``` div::before { content: ""; background-image: url("example.jpg"); display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } ```
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值