比如
background: url("haoroomsCSS1_s.jpg") 0 0 no-repeat,
url("haoroomsCSS2_s.jpg") 200px 0 no-repeat
就同时指定了两个图片,两个图片的位置可以通过后面的 位置参数调整。
如果是img元素,可以通过给img指定绝对定位的样式,通过绝对定位让两个img按照
要求的方式重叠。
比如:
img#id1 {position:absolutetop:0left:0width:100%display:block}
mg#id2 {position:absolutetop:20pxleft:0width:100%display:block}
试试就知道了。如果要使用绝对定位,img的父元素的样式需要加上 position:relative
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%。