css中如何调整插入背景图片的大小

html-css014

css中如何调整插入背景图片的大小,第1张

CSS2.1 之前是不能设置背景图大小的,CSS3就可以通过background-size来设定图片大小,可以是像素或者是百分比。

例如background-size:100px 200px表示把背景图片大小调整为100x200px。

要把图像应用成为背景,要使用 background-image这一 属性。当background-image 属性默认值是 none的时候,这表示背景上没有放置任何图像。如果需要设置一个背景图像,必须为这个属性设置一个 URL 值。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

css添加背景图片无法显示,有以下几方面原因:

1、css没有被调用;请检查css调用是否成功。

2、css图片地址不对;请检查css图片地址是否正确。

3、div的高度没有固定,是auto或者没有设值;div设置错误容易导致背景图片高度太大则无法显示。

4、div被嵌套;查看嵌套的div是否设置正确。

5、div代码不规范;请检查div代码是否书写正确。

在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方向的偏移量。当图片大于背景区域时,只显示图片左上角。 当图片和背景区域大小一样大时,显示整张图片。