在html和css阶段,通常可以使用两种方式来添加图片。即使用html标签引入图片和使用css中的background属性添加背景图。下面对这两种方式做个简单的介绍岩辩派。
一、使用【img/】元素引入图片
可以使用【img/】这个元素引入图片,这是一个行内元素,但是具有行内块的属性,可以自行设置高度和宽度。
【img src="../image/bird.png"alt="鸟图"height="300"】。
属性说明:
1、src:通过图片存放路径引入图片,其值就是图片的路径。
2、alt:可给图片设置一个备注名称,当图片因为某种原因加载粗贺不出来时,页面会显示设置的alt值。与之类似的还有一个属性title。alt和title有所不同。往些年面试时,alt和title的区别也是高频考点。这里我不做赘述,留给你的作业,自己去研究研究。
3、height:可设置图片的高度,与之对应的还有一个width属性,也就是可以设置图片的宽度,但是在实际的使用中,height和width往往只用其一,另一个属性值会自动按比例匹配。比如设置height="100",那么图片的width会根据你设置的height属性值自动等比例缩小或者放大,不用再显式的设置width值。反之亦然。
二、css的backgroud系列属性引入背景图。
除了使用html的【img src=''/】引入图片以外,还可以使用css的backgorund系列属性将图片作为背景图添加。由于background系列属性比较多,这里不做过多介绍,只说几个比较常用的属性,其他的可参考官方文档学习。
html代码:灶蔽
【div class="box"】【/div】
css设置图片的分开写法:
【style】
.box{
height:300px;
width:400px;
background-image:url(../image/bird.png);
background-size:100%100%;
background-repeat:no-repeat;
background-position:center;
}
【/style】
css设置图片的统一写法:
background-image,background-repeat,background-position可以合成一句。background-size,可以是一个值也可以是两个值,一个值时,第一个值标识高度,宽度则会自适应你设置的值。两个值时,图片会根据你自己设置的值拉伸或者缩小。
【style】
.box{
height:300px;
width:400px;
background:url(../image/bird.png)no-repeat center;
background-size:100%100%;
}
【/style】