怎样用CSS +DIV将第二张特定图片覆盖第一张图片的部分区域?

html-css014

怎样用CSS +DIV将第二张特定图片覆盖第一张图片的部分区域?,第1张

用CSS +DIV将第二张特定图片覆盖第一张图片的部分区域方法:

用CSS中元素的background : background-color || background-image || background-repeat || background-attachment || background-position。 示例代码如下:

复制代码代码如下:

background:transparent url(123.jpg) no-repeat scroll -140px -20px 

解释: 

transparent表示透明无颜色 

url(123.jpg) 表示背景图片

no-repeat 表示图片不重复

scroll 表示背景图片随浏览器下拉而滚动

-140px 表示水平位置在图片的-140px处(以图片的左上角为0,0)

-20px 表示垂直位置在图片的-20px处(以图片的左上角为0,0)

实现的方法和详细的操作步骤如下:

1、第一步,打开操作软件并使用DW定义内部CSS样式,见下图,然后进入下一步。

2、其次,完成上述步骤后,看一下背景图片的效果,见下图,然后进入下一步。

3、接着,完成上述步骤后,将img添加到div并输入以下代码,见下图,然后进入下一步。

4、最后,完成上述步骤后,就获得了想要的结果了,如下图所示。这样,问题就解决了。

只能够将图片或者包含图片的标签的position属性设为"absoulte",然后通过设置较大的z-index以及left和top属性去覆盖老图片。测试是最好用firefox浏览器。因为老版本的IE浏览器对z-index属性支持有一些问题。当然这样的bug是可以调试好的。