用HTML怎样在已有的一张背景图片上再居中叠加一张图片,求代码。

用HTML怎样在已有的一张背景图片上再居中叠加一张图片,求代码。,第1张

同一个元素不能设置2个背景图片的,当然可以这样做,写一个盒子(div)固定宽高,添加背景图片,,然后在这个div里面再写一个div和外围的div等宽高,样式加一个position:absolute属性,绝对定位来使两个div重叠,然后给它设置背景图片(background:url(../1.jpg)no-repeat center)即可

多个img叠加用css样式控制即可:

如果是背景的话,background 属性可以指定多个图片。

示例如下:

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、在同一个div里,先书写一段代码,如下图所示,在这个代码中给dive设置宽度和高度,这时为了让文字有一个具体的范围。

2、找到background,如下图示,在background的后面添加上图片作为这个的背景图案。

3、之后在background后面加上url(),为了连接图片,在url里面写的就是背景图片的路径。

4、可以根据个人喜好放入喜欢的图片,在这里路径一定要写对。

5、这样,保存之后文字就会覆盖在图片的上面了。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7112580.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存