课时100.背景图片和插入图片区别(掌握)

快捷键补充:

bc  background-color:;

bi  background-image:;

bgr background-repeat:;

gp  background-position:;

ba  background-attachment:;

bg +  background:#fff   url()   0  0  no-repeat;

到这里属性基本就讲完了,然后我们还有一些CSS3的属性没有讲,但是要用到CSS盒子模型,现在我们没有学盒子模型,所以不用讲

1.背景图片和插入图片区别?

我们先来看一个例子

如何快速的打出以下代码?

div.box$*2   tab键

现在,我们要分别用背景图片和插入图片的方式插入两张图片,要让div的宽和高等于图片的宽和高

现在我们要在.box1中放一些内容

<div class="box1">我是文字</div>

1.1 背景图片仅仅是一个装饰,不会占用位置,插入图片会占用位置

我们修改了一些代码

我现在,想把左上角的背景图移到右下角,背景图片有定位属性,我可以在第一个div的范围任意修改位置

这样我们背景图就移到了div的右下角,而我们想把box2的图片移动到右下角,目前我们没有知识能够做到

1.2背景图片有定位属性,所以可以很方便的控制图片的位置,插入图片没有定位属性,所以控制图片的位置不太方便

1.3插入图片的语义比背景图片要强,所以企业开发中如果你的图片想被搜索引擎收录,那么推荐使用插入图片

猜你喜欢

转载自www.cnblogs.com/luckyshuangshuang/p/9176416.html
今日推荐