css两张图片怎么叠加在一起?

1、新建一个html文件,命名为test.html,用于讲解css怎么把两个图片叠加在一起。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2、新建两个div,一个是class属性为a的div,另一个是class属性为b的div。

<div class="a"></div>
<div class="b"></div>

3、在两个div内分别加上一个图片标签img,并且写上两个图片的路径。

<div class="a">
    <img src="./css-4.jpg" alt="">
</div>
<div class="b">
    <img src="./css-5.jpg" alt="">
</div>

4、使用css对两个div的样式进行定义,(相关课程推荐:css视频教程) 分别设置其position属性为absolute,即两张图片在页面的位置是绝对定位。

.a{
    position: absolute;
}
.b{
    position: absolute;
}

5、使用z-index设置两张图片的叠加的顺序,设置1.jpg在下面,2.jpg在上面。

.a{
    z-index: 1;
    position: absolute;
}
.b{
    z-index: 2;
    position: absolute;
}

6、通过left和top设置div距离页面左边缘的距离和距离页面上边缘的位置,实现两个图片叠加。

.a{
    z-index: 1;
    position: absolute;
    left: 120px;
    top: 120px;
}

7、在浏览器打开test.html文件,查看实现图片叠加的效果。

Snipaste_2020-01-04_10-12-02.jpg

全部代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .a{
            z-index: 1;
            position: absolute;
            left: 120px;
            top: 120px;
        }
        .b{
            z-index: 2;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="a">
        <img src="./css-4.jpg" alt="">
    </div>
    <div class="b">
        <img src="./css-5.jpg" alt="">
    </div>
</body>
</html>
Image placeholder
前端答疑
未设置
  81人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css添加图片怎样找图片路径?

css添加图片怎样找图片路径?在CSS文件里,有时要用到background-image,即加一个背景图片,一般在显示标题时会经常用到。现在来看两个文件目录:/css/admin/main.css//

中国企业数据底子薄弱从何处说起?

问10个人关于中国企业数据底子的问题,9个人会告诉你很薄弱,然而薄弱又是一个相对的概念。而且,国内企业数据底子多少年能够打好不好说,但这注定是个多方协作探索的过程。参差不齐的数字底子“说中国企业数据底

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

一张图读懂《2020全球网络趋势报告》

日前,思科发布了《2020全球网络趋势报告》,从网络技术、运营、人才三大维度,了解网络如何与时俱进,满足关键业务需求。那么这份94页的报告,究竟有哪些亮点?戳下图,带你看明白!

不一样的css,sass(scss)的基本使用

前言此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。基础内容1.变量/*scss*/ //声明变量 $pri

css背景图片显示不完怎么解决?

css设置背景图片显示不全是因为背景图片过大导致的,我们可以通过设置div大小大于背景图片或使用background-size属性设置背景图片小于div大小使背景图片显示完全。示例:下面我们来看一下通

css中怎么把图片颜色反转

css中怎么把图片颜色反转css把图片颜色反转可以使用invert滤镜效果,invert滤镜就是为了设置元素的反色效果,它的值设置范围为:0-100%,100%为完全反色,0为显示正常的颜色。.nor

css怎么设置图片平铺方式?

background-repeat属性是用来设置背景图像如何平铺的。默认地,背景图像在水平和垂直方向上重复。属性值:repeat:即默认方式,完全平铺背景;no-repeat:在X及Y轴方向均不平铺;

css图片后的文字无法居中对齐怎么解决?

比如说,现在我要做一个简单的删除按钮,只由一个icon和“删除”两个字组成,你会如何布局,给你30秒时间考虑。好,先亮出HTML代码如下:删除很简单,就是一个class为del的div元素下有两个sp

css中背景透明的图片不透明怎么解决

css中背景透明的图片不透明怎么解决一、使用滤镜解决img{ background:transparent; -ms-filter:"progid:DXImageTransform.Microsoft

css中怎么设置图片大小?

css中怎么设置图片大小?语法:img{ width:150px; height:60px; }注:这里设置CSS宽度为150px,css高度为60px,CSS样式中width和height的值都单位

css图片在ie8中不显示怎么办?

css图片在ie8中不显示怎么办?css背景图片在ie8中不能显示是因为no-repeat前面缺少空格,添加一个空格,改成background:url(图片地址)no-repeat即可。代码:(相关课

css怎么让图片填满?

css怎么让图片填满?1、新建一个HTML文件,使用div标签创建一个模块,并设置其class属性为myclass。 Document (推荐学习:CSS视频教程)2、在标签里设置div

css3.0和css2.0区别?

css3.0和css2.0区别?css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属

css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显

dw cs6怎么保存为css格式

dwcs6怎么保存为css格式1、首先,打开DreamweaverCS6,新建一个css文档,选中“css”,点击确定按钮。2、将设计好的css样式放入该页面,@charset"utf-8";用来指定

css使用url引用图片报错

css使用url引用图片报错css使用url引用图片报错,是因为图片路径填写错误,路径需要相对于css文件,而不是引用css文件的html文件。例如:css文件夹下的index.css样式表中back

css能实现自动更换图片吗

css能实现自动更换图片吗css能实现自动更换图片,具体的做法是为每一张图片创建一个animation动画,设置不同的duration持续时间,再通过keyframes实现不透明度的变化,来实现更换图

怎样用css实现图片不间断滚动

怎样用css实现图片不间断滚动效果图:思路分析:第一步,定义div>ul>li*7,因为有7张图片。第二步,设置div的宽度高度以及li的浮动,保证它们全部在div内的同一行。第三步,实现滚动。用到了

css要不要给div里的图片设置宽高

css要不要给div里的图片设置宽高css需要给div里的图片设置宽高,因为图片尺寸过大时在小屏幕上会显示不下,出现横向滚动条,横向滚动条在移动端的显示并不是很友好,因此需要避免横向滚动条在移动端的出

如何保存css里的图片

如何保存css里的图片1、打开网页,按下f12打开开发者工具;2、使用dom选取工具(ctrl+shift+c)选择网页中需要下载的图片;3、之后在右侧css规则面板中,右键图片的url;(推荐学习:

css如何设置图片不变形

css如何设置图片不变形解决方法有两种:一、让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,图片也是等比例缩小,图片也不会变形。//原尺寸300*200 //等比缩放2:1 img{ wid

dw里怎样设置图片的css样式

dw里怎样设置图片的css样式1、首先在文件内插入一张图片,点击插入\图像,选择一张图片即可。2、选中图像,点击css样式窗口的+号,新建一个CSS(相关课程推荐:css视频教程)样式,打开对话框。选

css图片属性如何设置?

css图片属性如何设置?首先新建一个style标签;然后在style标签内使用语法img{属性:值}即可,比如设置图片边框属性img{border:1pxsolidred}。语法:img{ 属性:值;

如何在css中让图片横向展开排列?

如何在css中让图片横向展开排列?1、首先添加一个div来存放所有的图片。2、然后隐藏div在纵向的滚动条,横向的滚动条设置为自动。3、最后设置divwhite-space:nowrap不换行即可。这