CSS如何将图片叠加到一起?

html-css017

CSS如何将图片叠加到一起?,第1张

1、打开vscode,创建一个html页面。

2、在测试页面的同级目录,添加一张演示图片。

3、在测试页面中添加一个div标签,在标签内部添加一个img图片标签,设置图片的src地址。

4、在div的标签中,直接书写css的样式,设置div的宽度为500像素,高度为300像素,边框为1像素的红色框。再次在浏览器中打开,就可以看到图片,并没有填满整个div的空间。

5、想要让图片充满整个div,只需要对图片设置高宽都是100%即可。此处为了演示,将所有的img标签都设置成了100%,而且,使用的是外部css的书写形式。

6、如果图片使用的是背景图,不是img标签的形式,图片默认会在x和y轴重复,并不会拉伸,最终仍然填满了这个div的空间。

7、如果想要背景图也拉伸填满整个div空间,就需要设置背景图的,background-size: 100% 100%。

你的背景图片是什么样的图片,是可重复的图片还是不可重复的,如果是不可重复的,那建议换一张450X450的,如果可重复,那么把background-repeat:no-repeat去掉就好。