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

html-css010

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

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

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

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

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

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

首先：css外部链接文件引入样式的先后顺序：内部样式先于外部样式

其次：这样的需求一般很少见，出现这种需求最快的方法，无外乎直接更改内部样式

或者删除无关的外部样式，而不是去考虑怎么覆盖的问题

最后：由于外部样式代码具有复用性，建议使用，出现这种情况，直接删除内部样式，把外部文件中对应的样式直接更改为想要的样式即可。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

</head>

<style>

    div {

        position: relative

    }

    div > img {

    position: absolute

        top:0

        left:0

    }

    div >img:nth-child(2) {

        z-index: 1

    }

</style>

<body>

    <div>

        <img src="1.png" alt="">

        <img src="2.png" alt="">

    </div>

</body>

</html>

将第二张图片定位的方式定位到都一张图片的上面，再通过z-index调整 第二张图片 z轴的位置