html 如何让背景图片充满全图,就是拉伸
使用此代码:<img border='0' src='/jpg' width='100%' height='100%' style='position: absolute;left:0px;top:0px;z-index: -1'>或者background-size:cover。
拓展资料
【HTML】
超文本标记语言,标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。
【由来】
万维网上的一个超媒体文档称之为一个页面(外语:page)。作为一个组织或者个人在万维网上放置开始点的页面称为主页(外语:Homepage)或首页,主页中通常包括有指向其他相关页面或其他节点的指针(超级链接)。
所谓超级链接,就是一种统一资源定位器(Uniform Resource Locator,外语缩写:URL)指针,通过激活(点击)它,可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。
在逻辑上将视为一个整体的一系列页面的有机集合称为网站(Website或Site)。超级文本标记语言(英文缩写:HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。
因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
参考资料:百度百科--HTML
1. 原理:由于给网页设置背景图时,需要设置背景图不重复且充满整个浏览器屏幕,给body标签指定背景图,这样背景图就可以填充整个浏览器viewport了。其实,该方案对所有的块级容器都可以生效。块级容器的宽高是动态的,那么背景图将自动伸缩,充满整个容器。
2. 可设置body标签的CSS样式如下:
body{
/*加载背景图*/
background-image:url(./images/background.jpg);
/* 背景图垂直、水平均居中 */
background-position: center center;
/* 背景图不平铺 */
background-repeat: no-repeat;
/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
background-attachment: fixed; //此条属性必须设置否则可能无效/
/* 让背景图基于容器大小伸缩 */
background-size: cover;
/* 设置背景颜色,背景图加载过程中会显示背景色 */
background-color: #CCCCCC;
}
3. 或简写为如下CSS样式:
body{
background:url(./images/background.jpg) no-repeat center center;
background-size:cover;
background-attachment:fixed;
background-color:#CCCCCC;
}
html语言背景图片拉伸代码:background-size:cover,可以使图片拉伸铺满背景。
拓展资料
背景 (background) 属性定义元素的背景效果
元素的背景区包括前景之下直到边框边界的所有空间。因此,内容框与内边距都是元素背景的一部分,且边框画在背景上。
CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果;CSS 在这方面的能力远远在 HTML 之上。
background 是用于在一个声明中设置所有背景属性的一个简写属性。
格式: background: {属性值}
继承性: NO
可能的值:
background-color
background-image
background-repeat
background-attachment
background-position
新增的值:
background-clip
background-origin
background-size
注:可以在此声明中声明1到5个背景属性。
这只是 CSS 1.0 的属性,在CSS 2.0 background已经退出了历史舞台。
例:
<style type="text/css">
body
{
background: #ff0000 url('i/eg_bg_03.gif') no-repeat fixed center;
}
</style>
background-size:cover
html手册上的:
注意:如果打算使用背景图像,应该牢记:
这个图像会使页面加载时间过长吗?小技巧:图像文件的容量尽量不要超过10K。
这个图像跟页面上其他图像协调吗?
这个图像跟页面上的文字颜色协调吗?
这个图像平铺了以后看起来还可以吗?
这个图像吸引了文字的注意力,喧宾夺主了吗?
一般的网站很少使用背景图像。