html如何设置网页的背景图片

最新推荐文章于 2024-05-16 16:22:03 发布
最新推荐文章于 2024-05-16 16:22:03 发布
阅读量1.6w 收藏 108
点赞数 17
分类专栏： html基础 文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/big_beer/article/details/120670670
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.big_box{
			height: 100vh;
			background: url('./three.js-dev/examples/screenshots/webgl_loader_ttf.jpg');
			background-size: 100% 100%;
		}
	</style>
	<body>
		<div class="big_box">
		
		<!-- 这里面放网页的内容 -->
		
		
		</div>
	</body>
</html>

这里说几个点，需要注意一下：
1、*{
padding: 0;
margin: 0;
}
目的是未来消除游览器默认的边距，让外边距和内边距变成0

2、height: 100vh;是div高度100vh指的是页面窗口的100%。

3、background: url(’./框架文件/three.js-dev/examples/screenshots/webgl_loader_ttf.jpg’);引号里面的是图片的路径，用相对路径或者绝对路径指到你自己搞到的背景图片。

4、background-size: 100% 100%;设置图片的大小，两个100%分别是窗口的宽高占满。如果不设置会默认图片的大小像素，如果图片大小大于窗口大小就会只显示一部分，如果图片小于窗口，会复制多张图片填满窗口。

hello big_bear
关注
  • 17
    点赞
  • 踩
  • 108
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML如何设置背景图片？有几种设置背景图片的办法？
爱编程的鱼的博客
01-14 2万+
我们在编辑网页时，如果觉得网页过于单调，这时便可以加上一张自己喜欢的背景图。这篇文章中，W3Cschool 小编给大家介绍下 HTML 中如何设置背景图片，分别有哪几种设置背景图片的方法。
H5满屏彩色泡泡小特效（适合表白哦~做完发给让你每天想念的人吧~）
小淼淼的博客
09-13 787
满屏彩色泡泡小特效（做好之后发给你喜欢的人叭~）
html,css背景颜色,背景图片,背景平铺,背景位置的设置
最新发布
ndjziskwkhdh的博客
05-16 676
坐标值 : 　百分数 | 固定值 | top | center | bottom | left | center | right。设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。设置为contain，会自动调整缩放比例，保证图片始终完整显示在背景区域，不会溢出。background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;repeat-x : 　背景图像在横向上平铺。repeat-y : 　背景图像在纵向平铺。fixed : 　背景图像固定。
HTML网页图片背景以及图片自适应设置
m0_56146871的博客
04-14 1万+
关于HTML网页图片背景以及图片自适应设置 Test 1 背景图片需要用到标签中的background属性 图片背景需要显示的位置是网页的身体部分即在body中显示，因此background属性应该放在body标签内 本次使用图片的大小为4808*2704像素，这是图片原来的样子 这是代码部分 <body background="img\maple leaf.jpg"> <!--未设置图片大小--> </body> 这是仅设置了背景图片的效果，因为图片
【Web前端】网页背景图设置技巧
chen_z_p的博客
07-23 6万+
问题一：如何设置背景图铺满整个屏幕 css代码: body { background-image: url("../img/bg.jpg"); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; backgroun...
HTML设置图片为页面背景
热门推荐
世纪末的架构师的博客
12-06 11万+
HTML设置图片为页面背景： 问题： 在HTML页面中不使用CSS盒模型的前提下如何将一张图片设置为页面背景？ 方法： 在< body >中使用background以及style来设置 例： 在这里我把html格式的文件和jpg格式的图片文件都放到了桌面上 <html> <head> <meta content="text/html" charset="UTF-8"> <title>HTML设置图片为页面背景</
网页如何设置背景图片
12-25
网页如何设置背景图片配套代码文件
【html背景图片铺满网页】html 怎么让背景图铺满整个页面
04-11
html背景图片铺满网页
HTML|网页背景
01-08
我们往往在网页中会加一些背景颜色和背景图像让网页美观，吸引浏览者的眼球。那么我们如何加入背景，有些什么标签？有哪些注意事项呢？ 解决方案 需要了解关于背景的标签，学会用这些标签。要注意排版搭配。背景颜色...
javascript设置页面背景色及背景图片的方法
12-28
本文实例讲述了javascript设置页面背景色及背景图片的方法。分享给大家供大家参考，具体如下： <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN> <HTML> <HEAD> <TITLE> New ...
JS实现让网页背景图片斜向移动的方法
10-24
<title>JS实现让网页背景图片斜向移动 </html> ``` 在这个例子中，`background` 属性被用来设置网页的背景图片，这里的图片路径是 "images/changshi.ico"。 接着，我们需要编写JavaScript代码来实现图片的移动...
html网页怎么弄背景 图片,在html网页中如何设置背景图片？网页背景怎么设置？...
weixin_42360285的博客
06-15 1万+
不知道大家有没有发现，当我们在浏览部分网页的时候网页的背景都是很漂亮的。那么今天小编来教大家怎么在 html 网页中设置背景图片吧！1.首先还是老样子，我们在开发工具中新建一个 .html 文件，然后再文件中自己定义自己喜欢的内容，代码如下：网页背景设置网页背景怎么设置网页背景怎么设置网页背景怎么设置网页背景怎么设置网页背景怎么设置2.当我们完成第一之后，我们可以在内容中添加一下样式，首先我们在​...
如何在HTML添加背景图片么,如何在HTML中添加背景图片
weixin_39541750的博客
07-15 1万+
如何在HTML中添加背景图片在HTML中，我们可以使用以下两种不同的方法轻松地将背景图像添加到要显示在网页上的HTML文档中：使用背景属性(HTML标记)使用内部样式表使用背景属性注意：HTML 5不支持的background属性标签，因此我们必须使用内部CSS选项在Html文档中添加背景。如果要使用Background属性在Html文档中添加背景图像，则必须遵循以下步骤。使用这些步骤，我们可以轻...
html背景两个图片背景,一个DIV设置两张或多张背景图
weixin_33739480的博客
06-04 6543
自从有了CSS3之后，要想在同一个DIV里面设置多张图片，实在是一件很简单的事情，下面就为大家介绍这个。一、css3设置多张背景图片可以如下写：background:url("1_s.jpg") 0 0 no-repeat,url("2_s.jpg") 200px 0 no-repeat,url("3_s.jpg") 400px 201px no-repeat;也可以这么写：background-...
HTML中的背景设置（下）
m0_52660785的博客
07-26 801
对上篇文章的补充，主要是渐变背景和滤镜的用法。
HTML如何设置图片为背景图片
weixin_46958879的博客
07-20 1万+
背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。background-attachment背景图像是否固定或者随着页面的其余部分滚动。默认情况下background-image属性会在页面的水平或者垂直方向平铺。background简写属性，作用是将背景属性设置在一个声明中。background-position设置背景图像的起始位置。background-image属性描述了元素的背景图像.background-image把图像设置为背景。...
HTML设置背景颜色及背景图片
hff945的博客
08-26 1万+
背景 background-color 设置背景颜色 background-color: red; background-image 设置背景图片 - 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色 - 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满 - 如果背景的图片大于元素，将会一个部分背景无法完全显示 - 如果背景图片和元素一样大，则会直接正常显示 background-image: url("./img/1.png"); background-r
网页背景图片设置
ManonLiu
08-14 2753
使用background-image来设置背景图片 ——语法：background-image:url(相对路径); 如果背景图片大于元素，默认会显示图片的左上角 如果背景图片和元素一样大，则会将背景图片全部显示 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素 可以同时为一个元素指定背景颜色和背景图片 这样背景颜色将会作为背景图片的底色 一般情况下设置背景图片时都会同时指...
html页面背景图片,css如何设置背景图片？
weixin_33318720的博客
06-03 6964
在前端开发过程中，为了页面的美观，往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景？本文就给大家介绍css怎样设置背景图片。css可以通过background-image属性来设置背景图片，background-image属性用于设置一个元素的背景图像。元素的背景是元素的总大小，包括填充和边界(但不包括边距)。默认情况下，background-image放置在元素的...
html网页设置背景图片
09-26
HTML网页可以使用background-image属性来设置背景图片。可以通过以下步骤来设置背景图片： 1. 在HTML文件的头部或CSS文件中，使用background-image属性来指定背景图片的URL，例如：background-image:url('img_tree.png'); 2. 使用background-repeat属性来设置背景图片的平铺方式，例如：background-repeat:no-repeat表示不平铺，background-repeat:repeat-x表示水平平铺； 3. 使用background-position属性来设置背景图片的位置，例如：background-position:right top表示图片位于右上角。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值