`

两个div叠加(两张图片叠加)

阅读更多
引用
在常用html编写中,有很多地方用到两个层的叠加,也就是两个层的位置的设定问题。其实没有那么复杂,在此做个简单的演示,一看便知。层里面你可以放图片或其他什么的。(像现在的团购网站 购买按钮图片那块用到的比较多)


<div style="position: relative;">//这个层为外面的父层,只需设置相对位置样式即可
  <div style="position: absolute;">//这个为里面要叠加的层,只需设置绝对样式
    <img src="img/sunshuai.jpg"/>//这个为层里面的内容图片
  </div>
  <img src="20110110/871_129391305700000000.jpg"/>//这个为父层内容
</div>


引用

备注:1,父层和子层以及它们里面的内容的大小样式根据自己的应用自己设置调整。
            2,可根据设置子层的left和top样式使叠加的层的位置发生改变。
分享到:
评论
3 楼 wo4562658 2014-03-21  
,很牛,找了好久没找到...
2 楼 ddnzero 2013-04-16  
1 楼 jiang_grails 2012-03-26  

相关推荐

    css3实现一个div设置多张背景图片及background-image属性实例演示

    在这个例子中,`&lt;url1&gt;` 和 `&lt;url2&gt;` 分别代表两张背景图片的URL,而 `&lt;linear-gradient&gt;` 和 `&lt;radial-gradient&gt;` 用于创建渐变背景。需要注意的是,多个背景图片按照声明的顺序叠加,最上面的图片位于最底层,而...

    懒人原生css3实现图片由模糊到清晰逐渐加载过程

    其原理就是采用两张图片,一个模糊,一个清晰,用两个div叠加起来后 清晰的图片从完全透明变成全部显示出来,另外一个方向相反,默认加载时间为5秒 两者叠加起来就组成了这样一个动画过程,原理其实很简单 ...

    图片上叠加图片,类似于视频播放的样式

    在IT行业中,尤其是在网页设计和前端开发领域,创建动态...在这个例子中,通过在图片上叠加图片,我们能够模仿视频播放器的界面,提供一种新颖的展示方式。这不仅展示了CSS的强大功能,也体现了前端开发中的创新思维。

    CSS两张图片叠加透明显示特效

    本文将深入探讨如何使用CSS实现两张图片叠加并实现透明显示的特效,特别是利用`css blend-mode`属性来创建独特的混合效果。 首先,我们需要理解`blend-mode`属性。在CSS中,`blend-mode`允许我们将两个或多个图像...

    jQuery全屏图片叠加缩放切换点击查看大图效果代码

    在jQuery中,我们可以动态创建一个div作为叠加层,并通过CSS设置其透明度和位置。当用户滚动页面或点击图片时,叠加层的透明度可以逐渐变化,营造出过渡效果。同时,我们可以通过调整图片的`transform`属性实现缩放...

    jquery.carousel幻灯片插件制作左右箭头控制叠加图片...

    要在幻灯片两侧添加控制箭头,你需要在HTML中插入两个按钮元素,分别表示“向前”和“向后”。然后,使用jQuery为这些按钮添加点击事件监听器,当用户点击时触发幻灯片的切换。例如: ```html &lt;div id="carousel...

    jquery多张叠加图片上下切换代码

    这样,我们就实现了jQuery多张叠加图片上下切换的功能。用户点击“上一张”或“下一张”按钮时,图片会按照预设顺序进行切换,给用户带来平滑的视觉体验。这个技巧在网页设计中非常实用,可以增强用户的交互体验,...

    jQuery实现的3D版图片轮播示例【滑动轮播】

    在实现3D效果的图片轮播过程中,需要对CSS3的相关属性进行操作,特别是`transform`和`transition`两个属性。`transform`属性允许元素进行变换,如旋转、缩放、倾斜或平移。在文档内容中,通过计算放大倍数和偏移量...

    jQuery和CSS3超酷3D多层图片视觉差互动特效.zip

    这个特效主要通过叠加多张具有不同3D旋转角度的图片,当用户滚动页面时,每层图片以不同的速度移动,产生一种深度和立体感,从而创造出独特的3D视觉差效果。 首先,jQuery是一个流行的JavaScript库,它简化了...

    jQuery两幅图像动画叠加的效果

    通过CSS定位,我们可以使这两张图片重叠: ```html &lt;div id="image-container"&gt; &lt;/div&gt; ``` 这里的`#image-container`是一个包含两个图像的容器,`#base-image`是底层图像,`#overlay-image`是上层图像。 为了...

    基于jquery实现的仿优酷图片轮播特效代码

    1. 左右两个方向按钮,可以用来切换上一张与下一张。 2. 下方有分页指示器,用来标注滚动到了第几张,当然,你点击对应的按钮,也可以跳转到对应的图片。 3. 中间主要显示区域就是用来摆放需要轮播的图片。 根据上面...

    原生js实现图片层叠轮播切换效果

    同时,为了支持前进和后退按钮,还需要添加两个额外的元素,分别用于前一张和后一张图片的控制。 2. **CSS 样式**: - 使用 CSS 定义图片容器的样式,如宽度、高度、位置、阴影等,以创建层叠效果。 - 使用 `...

    HTML高级部分(共47张PPT).ppt

    在HTML高级部分,主要探讨了两个关键概念:图层(Layer)的应用和框架(Frames)的应用。 图层的应用: 图层允许开发者在网页上创建独立的、可移动或可调整大小的区域,这些区域可以叠加在网页的其他部分之上,提供...

    html5 水平时间轴设计

    // 假设每事件有两张图片,切换到下一张 }); ``` 四、动画效果 为了增加交互性,我们可以使用jQuery的`fadeIn`和`fadeOut`方法实现图片的淡入淡出效果,或者使用`animate`进行自定义动画。同时,可以利用`...

    jquery实现简单的banner轮播效果【实例】

    在JavaScript部分,首先定义了两个变量`time`和`index`,分别用于存放定时器的标识和当前显示的图片索引。在文档加载完成后,通过`$(function(){...})`立即执行函数来初始化轮播图的显示。使用`.hover()`方法来处理...

Global site tag (gtag.js) - Google Analytics