css设置图片某个区域为文字区域(让两个div重合)

最新推荐文章于 2022-12-11 21:11:27 发布
最新推荐文章于 2022-12-11 21:11:27 发布
阅读量715 收藏 1
点赞数
文章标签： div重合
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feiyu168/article/details/45888515
版权
该博客介绍了如何使用CSS让两个div重合，以在图片的特定区域显示动态生成的提示文字。通过设置div的相对和绝对定位，实现了图片上的按钮与提示文字的重叠效果，点击按钮时，程序会改变提示文字内容和图片源，从而实现播放和暂停音乐的功能。
摘要由CSDN通过智能技术生成

为了播放音乐。音乐的按钮有一个区域，放提示语，用程序动态设置。

效果图如：

字的内容由成都设计公司提供的程序来处理:

[html]     view plain  copy
<EMBED id=ZeroClipboardMovie_1 height=18 name=ZeroClipboardMovie_1 type=application/x-shockwave-flash align=middle pluginspage=http://www.macromedia.com/go/getflashplayer width=18 src=http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf wmode="transparent" flashvars="id=1&width=18&height=18" allowfullscreen="false" allowscriptaccess="always" bgcolor="#ffffff" quality="best" menu="false" loop="false">
  1. <div style="position:relative">  
  2.                   <!-- 图片的DIV -->  
  3.                  <
最低0.47元/天 解锁文章
feiyu168
关注
点击图片显示说明文字
04-10
JS应用，鼠标悬停图片上，可以显示半透明说明文字
CSS—将文字和图片重叠，元素重叠效果
dey8091的博客
05-30 4071
将文字或者其他元素和图片重叠 1.上层为块级元素，效果图： 设置上边元素的定位为 position:relative 再根据相对图片的位置调整right、left、top和bottom值 2.当上层元素是文字时，效果图： 可设置文本框的区域大小，然后将图片设置为背景 width: 100%; height: 350px; backgrou...
CSS的一些属性知识（一）
qq_55928824的博客
12-11 196
CSS的一些属性知识（一）
两个div叠加(两张图片叠加)
Hmillet的专栏
05-25 6861
引用 在常用html编写中，有很多地方用到两个层的叠加，也就是两个层的位置的设定问题。其实没有那么复杂，在此做个简单的演示，一看便知。层里面你可以放图片或其他什么的。(像现在的团购网站 购买按钮图片那块用到的比较多) 代码   "position: relative;">//这个层为外面的父层，只需设置相对位置样式即可     "position: abso
判断可拖动div是否重合 重合多少
12-09
2. **设定重叠条件**：两个div重合的条件是它们的边界有交集。具体来说，如果div1的`left`小于div2的`right`，并且div1的`right`大于div2的`left`，同时div1的`top`小于div2的`bottom`，并且div1的`bottom`大于div2...
CSS实现图片背景填充的六边形的示例代码
09-24
为了让六边形的形状更加明显，我们通常会将矩形的高度设为宽度乘以`Math.sqrt(3)`，这样可以确保旋转后它们的边缘能够完全重合，形成一个正六边形。在这个例子中，矩形的宽度和高度比例是60px : 104px，大约满足这个...
元素浮动之后文字会环绕而不是重合原因示例解答
09-25
举个例子，如果我们有两个相邻的`div`元素，一个设置了浮动，另一个没有，那么设置浮动的`div`会让其后的`div`元素的文本环绕自身，而不会覆盖文本。但如果使用绝对定位，不设置浮动的`div`将会直接占据原本浮动元素...
CSS简单实现重叠线效果
09-25
在网页中，重叠线通常指的是两个元素之间线条的交错或叠加，可以增强视觉层次感，让页面看起来更加精致。常见的应用场景包括标题分隔、列表分隔等。 在给定的代码示例中，我们看到使用了HTML和CSS来创建这个效果。...
CSS元素的重叠方式
ron_wang_的博客
08-13 1万+
CSS元素的重叠方式 负margin position 浮动
CSS3 背景裁剪区域 background-clip属性
歪脖先生的博客
02-18 2056
背景裁剪区域默认情况下，背景颜色的显示范围为 border-box 区域，不重复的背景图像的显示范围为 padding-box 区域，而重复的背景图像的显示范围为 border-box 区域。然而，有时候却希望控制背景的显示范围。这时，就可以通过 background-clip属性用来定义元素背景的裁剪区域，即背景的显示范围，可选值有 border-box | padding-box | cont...
在图片指定位置上输出文字
dabao87的博客
04-20 1005
在图片指定位置上输出文字，不管在任何分辨率下文字的位置不变 1：要先将图片的宽高写固定， 2：将文字的标签包在图片的div中，利用padding-top确定文字的位置 说白了就是要将文字的位置相对图片定位好就行了 html: <div class="rewardBg"><p>23234</p></div> css: .rewardBg{b...
两个div的重叠效果,上层透明
编码青年的专栏
09-12 6694
dddddddddddddddddddddddddd 说明：position:relative; 相对定位 position:absolute; 绝对定位 z-index:1; 叠放的次序为一 filter:alpha(opacity=50); div的透明度为百分之五十 适用于IE opacity:0.6; div的透明度 适用于FF 1.5也支持 -moz-opacit
判断两个html元素是否重叠的函数
旷古的寂寞的博客
04-29 3730
node1 = $("#id1");node2 = $("#id2");is_overlap = function(node1,node2) { var rect1 = node1[0].getBoundingClientRect(); var rect2 = node2[0].getBoundingClientRect(); var overlap = !(rect1.right rect2.
HTML中如何让两个div并排显示，举个例子
热门推荐
old_man31的博客
01-18 1万+
在HTML中让两个div并排显示，通常情况下有三种实现方式，包括: https://zhidao.baidu.com/question/135016260138604645.html （1）设置为行内样式，display:inline-block （2）设置float浮动 （3）设置position定位属性为absolute 以下为三种方式的具体实现代码： 1、设置每个div的展现属性为行内样式，...
如何让div中两个img位置重合
最新发布
06-10
你可以在CSS中给这两个img设置绝对定位，并将它们的位置都设置为相同的值，这样它们就会重合在一起。具体的代码如下： HTML代码： ``` <div class="image-container"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> </div> ``` CSS代码： ``` .image-container { position: relative; } .image-container img { position: absolute; top: 0; left: 0; } ``` 在这个例子中，我们将包含这两个img的div设置为相对定位。然后，我们将这两个img设置为绝对定位，并将它们的位置都设置为0，这样它们就会重合在一起。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值