精华内容
下载资源
问答
我要提问
  • HTML 设置背景图片自适应
    2022-04-02 13:55:30

    HTML 设置背景图片自适应

    background: url(xxx.png) no-repeat fixed;
background-size:100% 100%;
    css
    更多相关内容

  • HTML中使背景图片自适应浏览器大小实例详解

     2020-08-30 21:47:45
    主要介绍了HTML中使背景图片自适应浏览器大小实例详解的相关资料,需要的朋友可以参考下
    收起

  • html5背景图片自适应特效代码

     2021-03-20 04:13:08
    html5背景图片自适应代码是一款背景不随滚动条滚动，会根据分辨率不同自动匹配对应的背景图片。
    收起

  • html让背景图片自适应填充整个页面

     千次阅读 2021-12-23 17:17:10
    body中写img标签：图片设置宽高都为100%，位置为absolute； <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> body { ...

    方法一：img标签设置

    body类的样式：去除默认外边距和内外距为0；

    body中写img标签：图片设置宽高都为100%，位置为absolute；

    <!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			body {
				padding: 0;
				margin: 0;
			}
			
			img {
				position: absolute;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<img src="img/bottom.jpg">
	</body>

</html>

    方法二：background-size:cover;属性指定背景图片大小

    <!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>练习</title>
		<style>
			body {
				/*加载背景图：图片地址 不平铺 */
				background: url(img/l.png) no-repeat center center;
				/* 让背景图基于容器大小伸缩 */
				background-size: cover;
				/* background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
					scroll 背景图片随着页面的滚动而滚动，这是默认的。
 					fixed 背景图片不会随着页面的滚动而滚动。
  					local 背景图片会随着元素内容的滚动而滚动。*/
				background-attachment: fixed;
			}
		</style>
	</head>

	<body>

	</body>

</html>

     方法三：background-size：100% 100%；与background-attachment:fixed;设置

    <!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>练习</title>
		<style>
			body {
				/*加载背景图：图片地址 不平铺 */
				background: url(img/l.png) no-repeat;
				/* 让背景图基于容器大小伸缩 */
				background-size: 100% 100%;
				background-attachment: fixed;
			}
		</style>
	</head>

	<body>

	</body>

</html>

     效果展示：

    收起
    展开全文

  • CSS实现网页背景图片自适应全屏的方法

     2020-12-09 13:33:47
    本文介绍了CSS实现网页背景图片自适应全屏的方法，分享给大家，具体如下： 网页背景自适应全屏.PNG 一张清晰漂亮的背景图片能给网页加分不少，设计师也经常会给页面的背景使用大图，我们既不想图片因为不同分辨率...
    收起

  • html设置背景图片自适应

     万次阅读 多人点赞 2019-04-25 17:53:47
    在网上找了很久，终于在一个百度问答里找到正确答案，记录下来，方便以后使用。 在<body>中设置： <body background="images\bg.jpg" style=" background-repeat:no-repeat ;...第一行是图片...

    在网上找了很久，终于在一个百度问答里找到正确答案，记录下来，方便以后使用。
    在<body>中设置：

    <body background="images\bg.jpg"
style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;"
>

    第一行是图片url
    第二行是背景图片不重复
    第三行是达到窗口的百分百比例
    第四行是图片固定，随着页面滚动而移动

    收起
    展开全文

  • html5背景图片自适应代码.zip

     2019-07-04 23:51:14
    html5背景图片自适应代码是一款背景不随滚动条滚动，会根据分辨率不同自动匹配对应的背景图片。
    收起

  • html5背景图片自适应代码

     2021-04-06 14:38:43
    html5背景图片自适应代码是一款背景不随滚动条滚动，会根据分辨率不同自动匹配对应的背景图片。
    收起

  • HTML中背景图片如何自适应屏幕

     千次阅读 2022-01-20 20:32:49
    HTML中背景图片如何自适应屏幕 要求就是图片要求自适应屏幕大小，并且图片不能变形 一张清晰漂亮的背景图片能给网页加分不少，怎么做到背景图片因为不同分辨率图片变形，也不希望当在大屏的情况下，背景有一块露白...

    HTML中背景图片如何自适应屏幕

    要求就是图片要求自适应屏幕大小，并且图片不能变形

    一张清晰漂亮的背景图片能给网页加分不少，怎么做到背景图片因为不同分辨率图片变形，也不希望当在大屏的情况下，背景有一块露白，简而言之，就是实现能自适应屏幕大小又不会变形的背景大图，而且背景图片不会随着滚动条滚动而滚动。

    法一、在<body>中设置：

    <body background="images\bg.jpg"

    style="background-size:100%;

    background-attachment: fixed;">

    其中：

    background-size:100%是达到窗口的百分百比例

    background-attachment: fixed是图片固定，不随着页面滚动而移动

    下面给出完整源码

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>图片自适应</title>
<body background="./a3.jpg"
style="background-size:100% 100%;
background-attachment: fixed;">
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
</body>
</html>

    保存文件名：背景图片如何自适应屏幕.html

    运行效果：

    法二、在<body>中设置：

    <body style="background-image: url(./a3.jpg);

    background-size: 100% ;

    background-attachment: fixed;" >

    下面给出完整源码

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>图片自适应2</title>
<body style="background-image: url(./a3.jpg); 
background-size: 100% ;
background-attachment: fixed;" >
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
</body>
</html>

    保存文件名：背景图片如何自适应屏幕2.html

    运行效果：

    建议采用法二。

    附录

    HTML的 body 元素（也称为标签）表示文档的内容，此元素包含的属性background 将URI所指向的图片作为背景。此方法不符合规范，请使用 CSS 的 background 属性替代。可参见<body>：文档主体元素 - HTML（超文本标记语言） | MDN

    CSS 的background-size 属性指定背景图像大小，以象素或百分比显示，可参见

    background-size - CSS（层叠样式表） | MDN

    CSS的background-attachment 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动，可参见background-attachment - CSS（层叠样式表） | MDN

    CSS的background-image 属性用于为一个元素设置一个或者多个背景图像。可参见background-image - CSS（层叠样式表） | MDN

    收起
    展开全文
    css 前端

  • html背景图片自适应屏幕

     2022-02-09 10:39:09
    由于图片与屏幕尺寸不匹配或希望在各种设备上正常显示，问题如下： 问题代码 <img src="la.png" /> 整个图片塞不下 解决方法： 法1 <body style="background-image: url(la.png); background-size: 100%...
    收起
    css css3

  • HTML5 如何让背景图片自适应浏览器大小

     万次阅读 多人点赞 2019-05-10 11:25:04
    问题描述 body标签的图片不能拉伸，在body标签里设置background会出现如下情况： 解决方法 使用一个style标签 <style> .background_{ background:... //这一设置把图片铺满整个背景 } </style> 在bo...
    收起

  • 基于html5背景图片自适应代码

     2021-06-12 01:59:30
    基于html5背景图片自适应代码是一款背景不随滚动条滚动，会根据分辨率不同自动匹配对应的背景图片。效果图如下：实现的代码。css代码：.jawbone-hero .jawbone-hero-image {position:absolute;background:...
    收起

  • html背景图片自适应窗口大小

     万次阅读 多人点赞 2019-05-06 19:14:05
    html 图片自适应窗口大小 background-size:cover 会把图片拉伸至足够大，但是背景图片有些部分可能显示不全 #bgImg { height: 100%; width: 100%; background: url('../img/bg/snow.jpg') no-repeat; background...
    收起
    css

  • html或css background中能否使背景图片自适应大小？

     2021-06-12 06:23:41
    6.3. CSS BACKGROUND-REPEAT 属性BACKGROUND-REPEAT属性是CSS2.1提出的.IE6,FIREFOX1.5,OPERA9支持此属性BACKGROUND-REPEAT -- 定义背景图片的重复方式* 取值: REPEAT | REPEAT-X | REPEAT-Y | NO-REPEAT | INH...
    收起

  • CSS背景图片自适应大小

     千次阅读 2022-01-14 12:28:40
    这里只介绍两种方式，一种是利用<img>标签，一种是设置style的background；当然肯定不止这两种方式 <img>标签 /* css */ ... background: rgb(129, 155, 190) url... /* 决定背景图像的位置是在视口内固定
    收起
    css 前端

  • CSS怎么设置背景图片自适应全屏？附源码！

     2021-06-14 01:45:54
    那么 CSS 怎么设置背景图片自适应全屏呢？这篇文章告诉你。实现效果：源码：CSS设置背景图片自适应 - 编程狮(w3cschool.cn)body{position:fixed;top: 0;left: 0;width:100%;height:100%;min-width:...
    收起

  • HTML5 body设置全屏背景图片 如何让body的背景图片自适应整个屏----实战经验

     2021-06-10 06:54:26
    不允许有白色底色产生，因为手机高度不一样错误的写法：加到div中结合图片设置min-height，但是页面不会回弹话不多说直接上代码终极方案html,body{width:100%;height:100%}再加一段body{font-family: "华文细黑";...
    收起

  • html图片自适应手机屏幕大小的css写法

     2020-09-25 02:14:36
    在html里面插入图片，让其自适应屏幕大小，可以通过css来完成，下面有个示例，希望对大家有所帮助
    收起

  • 背景图片自适应大小(css3)

     千次阅读 2021-06-08 18:24:11
    background-size的两个可选值的含义：contain是让背景图片恰好显示在容器中，图片的外边缘“顶着”容器的内边缘；而cover是覆盖容器，容器的外边缘“顶着”图片的内边缘。 另外，center是让图片居中定位，让图片的...
    收起

  • html背景图片自适应

     千次阅读 2019-07-12 11:07:47
    DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text...
    收起

  • css实现背景图片自适应屏幕

     2021-09-09 17:21:05
    background: url(../assets/images/bgi.png) no-repeat top; background-size: cover; background-attachment: fixed; width: 100%; height: 100%; position: fixed; zoom: 1; top: 0;...
    收起
    css

  • div设置背景图片自适应

     千次阅读 2021-02-05 13:53:22
    div设置背景图片,不重复不变形，还可根据不同屏幕的宽度，自适应高度 效果： 宽度变窄，高度相应比例变窄 宽度变宽，高度相应比例变宽 高度与宽度无法直接自适应，需要找一个中间的属性相串联。 宽度的自适应是...
    收起
    css css3

  • css适应屏幕 CSS背景图片自适应屏幕大小

     千次阅读 2021-06-09 11:08:06
    怎么屏幕自适应？？？？？ 我全用了margin的百分比但依旧达不到自适应的/* 打印样式 */ @media print { color: red; } /* 手机等小屏幕手持设备 */ @media screen and (min-width: 320px) and (max-width: 480px) { ...
    收起

  • html 标签内背景图片自适应 div 大小

     千次阅读 2018-12-17 15:25:31
    只需通过css设置background-size属性为contain，即 background-size:contain 注意：一定要在先设置background之后再设置background-size属性，这样才有效 转自：...
    收起

  • 图片自适应兼容IE8完美就解决方案

     2018-11-19 11:34:27
    html5 上图片背景自适应元素的解决方案，使用js方式解决，有很多解决方案中background-box 在IE8中不兼容的问题
    收起

  • HTML网页图片背景以及图片自适应设置

     千次阅读 2021-04-14 22:14:55
    关于HTML网页图片背景以及图片自适应设置 Test 1 背景图片需要用到标签中的background属性 图片背景需要显示的位置是网页的身体部分即在body中显示，因此background属性应该放在body标签内 本次使用图片的大小为4808...
    收起

  • 如何让HTML页面中的背景图片自适应浏览器高度和宽度大小

     千次阅读 2021-01-20 17:01:16
    HTML页面中的背景图片自适应浏览器高度和宽度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>HTML页面中的背景图片自适应浏览器高度和宽度</title...
    收起
    css3 css

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,916
精华内容 9,966
热门标签
关键字：

html让背景图片自适应