当前位置:首页 > 前端技术 > 使用CSS实现图片叠加效果

使用CSS实现图片叠加效果

2022年11月09日 20:25:39前端技术6

方式一:一张作为背景,一张用<img/>图片标签,如:

<div style="background:url('1.jpg') 0 0 no-repeat">
    <img src="2.jpg" />
</div>

方式二:两张图片都用<img/>标签,用绝对位置定位,利用z-index属性控制其上下层关系,z-index的值越大,就越大。如:

<div style="position:relative">
    <img src="1.jpg" style="position:absolute; left:0; top:0; z-index:1;" />
    <img src="1.jpg" style="position:absolute; left:0; top:0; z-index:2;" />
</div>

作者:想做一只快乐的修狗
来源链接:https://blog.csdn.net/weixin_44109827/article/details/123872218

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/69026.html

标签: css
分享给朋友:

“使用CSS实现图片叠加效果” 的相关文章

如何使用纯 CSS 创建翻牌动画

如何使用纯 CSS 创建翻牌动画

下面的示例向您展示了如何使用纯 CSS 创建翻牌动画。 作者:坚果 公众号:“大前端之旅” 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括F...

VSCode代码自动补全(html标签、style样式、css属性及值)

VSCode代码自动补全(html标签、style样式、css属性及值、),修改配置文件即可完成! 操作环境 1. 系统window 10 2. 软件VS code 2019汉化 1.按CTRL+SHIFT+P 2.输入搜索Su...

css中的@media用法总结

1、head标签中引入 //语法: @media mediatype and | not | only (media feature) { css-code; } //也可以针对不同的媒体使用不同的stylesheets: <!--<link rel="st...

CSS放置显示a标签的下划线

  text-decoration: underline; text-decoration属性规定文本修饰(下划线 underline、上划线 overline、中划线 line-through) 作者:迷豆腐 来源链接:https://blog.cs...

css文字重叠解决

css文字重叠解决

DIV+CSS布局文字较多时候重叠下一行文字内容如何解决? 出现原因是因为对li设置了css高度和宽度,当内容比较多是内容会自动换行,而又有高度,这样就造成内容溢出而与下一排内容重叠覆盖现象。 解决方法如下: 第一种,取消高度...

CSS元素类型

CSS元素类型

前面有一篇文章讲到在css世界中,html元素的表现都是一个个盒子,而css中盒子的显示方式有三种方式,分别是块元素、行内元素和行内块元素。本文总结这三种显示方式的特征和区别。 1 写在前面 最近在整理cnblogs上页面的样式,默认右侧【随笔分类】中的标...

html常用标签以及css基本属性和选择器

html常用标签 一般格式为: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5...

CSS样式学习

CSS样式学习 1.css概述 css(cascading style sheet):是一种层叠样式表语言 css的作用是修饰HTML页面,设置html元素的样式,让HTML页面更加好看。 css样式能写在html文件中,css的...

深入理解CSS动画animation

深入理解CSS动画animation

[1]定义 [2]关键帧 [3]动画属性 [4]多值 [5]API 前面的话   transition过渡是通过初始和结束两个状态之间的平滑过渡实现简单动画的;而animation则是通过关键帧@keyframes来实现更为复杂的动画效果。本文将介绍关于ani...

通过css设置标签内文字均匀分布

通过css设置标签内文字均匀分布

通过css设置标签内文字均匀分布 效果示例图 代码示例 解析text-align 解析text-align-last(不支持safari浏览器)...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。