首先,先在网页中设置一个div,并且给这个div起一个id。
然后我们设置一下这个div的宽度和高度。这里我就设置成200px。
如图,按照一般思路,我们会使用img标签来在网页中插入一张图片。
然后我们设置img标签的样式,因为图片的大小不一定是跟div一样大,所以我们要设置,以免超出div范围。
接着来看看插入图片之后的效果图。
接着我们在div中插入文字,随便输入什么文字都可以。
然后保存网页预览看效果,可以看到,文字不在图片上面,这就是我们经常遇到的困惑了,接着我们开始解决这个困惑。
如图,我们把img标签注释掉,因为img标签插入的图片是内容,已经填满了div,所以如果我们再插入文字,就会超出div的范围。
我们需要的是把图片作为背景,而不是作为内容,这就要用到background属性了,我们设置div的background属性。
然后使用URL()来连接图片,URL括号里面的参数就是图片的存放路径。
如图,我在里面填入图片的相对路径。
接着我们再设置背景图片的大小,这样做也是为了让图片适应div,填满整个div。
接着我们再来保存看看,可以看到,文字已经在图片的上面了哦。其实,我们应该把图片用作背景,这样文字才可以放在图片上面哦。