html中如何加入背景图片_随笔

在html中某个div里加入背景图片的话，主要有以下几种方式：第一种：在css文件里加入背景图片：在css里用url(../images/背景图2.jpg)，在内联css和引入css中会由于html文件和css文件所处的相对位置不同，引入图片路径会有所不同。如图：第二种：在html中引入：<div class="detail" style="background-image: url(../images/背景图1.jpg)"></div>，同理url()括号里是图片的引入路径。如图：第三种：在div中加一张图片 <div class="detail" > <img src="../images/背景图1.jpg" alt="" style="width:100%height:100%"> </div> 如图：当图片小于背景区域大小时，图片会不断重复显示，如果不想图片重复显示，可以设置background-repeat，background-repeat有4个值，分别是repeat（代表重复显示）、no（代表不重复）、repeat-x（代表水平方向上重复）、repeat-y（代表垂直方向上重复）当图片小于背景区域大小时，默认从左上角开始铺，如果想从任意位置开始铺，可以使用background-position属性，设置在x、y方向的偏移量。当图片大于背景区域时，只显示图片左上角。当图片和背景区域大小一样大时，显示整张图片。

html中设置元素的背景色都是通过CSS中的background 属性来完成。

例如，给整个页面（body）设置背景色：body{background: #ddd}；如果要将图片作为背景色：body{background-image: url(1.jpg)}，其中url括号后面的是背景图片的链接。

拓展资料：

background 简写属性在一个声明中设置所有的背景属性。

background可以设置如下属性：

background-color 背景颜色

background-position 背景图像的位置

background-size 背景图片的尺寸

background-repeat 重复背景图像

background-origin 背景图片的定位区域

background-clip 背景的绘制区域

background-attachment 背景图像是否固定或者随着页面的其余部分滚动

background-image 背景图像

如果不设置其中的某个值，也不会出问题，通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

代码：

效果：

背景图片不重复不平铺，可以这样设定背景：

1、<body style="background-image: url("图片文件地址")background-attachment: fixed">

这样背景图片就会固定住，不会因页面滚动而重复。

2、使图在任何大小的屏幕都不会显示重复，可以这样设定背景（图像不平铺）：

3、两者结合，就是：<body style="background-image: url("图片文件地址")background-repeat:no-repeatbackground-attachment: fixed">

扩展资料

超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：

简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。

可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。

平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。

通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

参考资料百度百科 HTML

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/8300747.html

html中如何加入背景图片

发表评论

评论列表（0条）