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

    HTML 设置背景图片自适应

    background: url(xxx.png) no-repeat fixed;
    background-size:100% 100%;
    
    更多相关内容
  • 主要介绍了HTML中使背景图片自适应浏览器大小实例详解的相关资料,需要的朋友可以参考下
  • 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实现网页背景图片自适应全屏的方法,分享给大家,具体如下: 网页背景自适应全屏.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背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片。
  • 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

    展开全文
  • 由于图片与屏幕尺寸不匹配或希望在各种设备上正常显示,问题如下: 问题代码 <img src="la.png" /> 整个图片塞不下 解决方法: 法1 <body style="background-image: url(la.png); background-size: 100%...
  • HTML5 如何让背景图片自适应浏览器大小

    万次阅读 多人点赞 2019-05-10 11:25:04
    问题描述 body标签的图片不能拉伸,在body标签里设置background会出现如下情况: 解决方法 使用一个style标签 <style> .background_{ background:... //这一设置把图片铺满整个背景 } </style> 在bo...
  • 基于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...
  • 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设置背景图片自适应 - 编程狮(w3cschool.cn)body{position:fixed;top: 0;left: 0;width:100%;height:100%;min-width:...
  • 不允许有白色底色产生,因为手机高度不一样错误的写法:加到div中结合图片设置min-height,但是页面不会回弹话不多说直接上代码终极方案html,body{width:100%;height:100%}再加一段body{font-family: "华文细黑";...
  • 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...
  • 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;...
  • div设置背景图片自适应

    千次阅读 2021-02-05 13:53:22
    div设置背景图片,不重复不变形,还可根据不同屏幕的宽度,自适应高度 效果: 宽度变窄,高度相应比例变窄 宽度变宽,高度相应比例变宽 高度与宽度无法直接自适应,需要找一个中间的属性相串联。 宽度的自适应是...
  • 怎么屏幕自适应????? 我全用了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属性,这样才有效 转自:...
  • html5 上图片背景自适应元素的解决方案,使用js方式解决,有很多解决方案中background-box 在IE8中不兼容的问题
  • 关于HTML网页图片背景以及图片自适应设置 Test 1 背景图片需要用到标签中的background属性 图片背景需要显示的位置是网页的身体部分即在body中显示,因此background属性应该放在body标签内 本次使用图片的大小为4808...
  • HTML页面中的背景图片自适应浏览器高度和宽度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>HTML页面中的背景图片自适应浏览器高度和宽度</title...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,916
精华内容 9,966
关键字:

html让背景图片自适应