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

最新推荐文章于 2022-12-11 21:11:27 发布
最新推荐文章于 2022-12-11 21:11:27 发布
阅读量702 收藏 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
关注
html中多个div如何使边框重合,css 中多种边框的实现小窍门
weixin_39577052的博客
06-17 3494
一、多重边框背景知识：box-shadow，outline鉴于使用场景的多元化，多重边框的设计越来越多，以往可以借助 border-image 属性应付一下，但是这个在css 代码层面并不是很灵活。现在我们借助 box-shadow 和 outline 两个属性来分别实现多重边框。1、box-shadow 方案思路：利用 box-shadow 的第四个参数(扩张半径)的大小，多重投影代码示例：多重...
点击图片显示说明文字
04-10
JS应用，鼠标悬停图片上，可以显示半透明说明文字
CSS—将文字和图片重叠，元素重叠效果
dey8091的博客
05-30 4013
将文字或者其他元素和图片重叠 1.上层为块级元素，效果图： 设置上边元素的定位为 position:relative 再根据相对图片的位置调整right、left、top和bottom值 2.当上层元素是文字时，效果图： 可设置文本框的区域大小，然后将图片设置为背景 width: 100%; height: 350px; backgrou...
CSS的一些属性知识（一）
qq_55928824的博客
12-11 183
CSS的一些属性知识（一）
CSS页面定位多个div不重合
dawnStart的博客
07-06 1860
效果图： 之前是想高度写死，但是屏幕不适应 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 .lightNum-div{ height: 15px; left:10px; top: 10px; position: absolute; width: 10%; z-index: 999; } //定位在左上部分，高度占40% .pie-div{ height: 40%; left:10px; top
flex布局实现叠在另一个div之上_html – 使用CSS flexbox重叠两个居中的元素
weixin_39669638的博客
12-20 1651
我试图绝对将两个元素放在页面中间,一个在另一个后面.目的是让一个页面完全响应中间的圆圈,后面有一个脉冲效果.html,body {height: 100%;width: 100%;}body {background: lightblue;display: flex;align-items: center;justify-content: center;}.container {display: f...
判断可拖动div是否重合 重合多少
12-09
2. **设定重叠条件**：两个div重合的条件是它们的边界有交集。具体来说，如果div1的`left`小于div2的`right`，并且div1的`right`大于div2的`left`，同时div1的`top`小于div2的`bottom`，并且div1的`bottom`大于div2...
CSS3 背景裁剪区域 background-clip属性
歪脖先生的博客
02-18 2042
背景裁剪区域默认情况下，背景颜色的显示范围为 border-box 区域，不重复的背景图像的显示范围为 padding-box 区域，而重复的背景图像的显示范围为 border-box 区域。然而，有时候却希望控制背景的显示范围。这时，就可以通过 background-clip属性用来定义元素背景的裁剪区域，即背景的显示范围，可选值有 border-box | padding-box | cont...
判断两个html元素是否重叠的函数
旷古的寂寞的博客
04-29 3697
node1 = $("#id1");node2 = $("#id2");is_overlap = function(node1,node2) { var rect1 = node1[0].getBoundingClientRect(); var rect2 = node2[0].getBoundingClientRect(); var overlap = !(rect1.right rect2.
在图片指定位置上输出文字
dabao87的博客
04-20 987
在图片指定位置上输出文字，不管在任何分辨率下文字的位置不变 1：要先将图片的宽高写固定， 2：将文字的标签包在图片的div中，利用padding-top确定文字的位置 说白了就是要将文字的位置相对图片定位好就行了 html: <div class="rewardBg"><p>23234</p></div> css: .rewardBg{b...
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的重叠效果,上层透明
编码青年的专栏
09-12 6654
dddddddddddddddddddddddddd 说明：position:relative; 相对定位 position:absolute; 绝对定位 z-index:1; 叠放的次序为一 filter:alpha(opacity=50); div的透明度为百分之五十 适用于IE opacity:0.6; div的透明度 适用于FF 1.5也支持 -moz-opacit
CSS元素的重叠方式
ron_wang_的博客
08-13 1万+
CSS元素的重叠方式 负margin position 浮动
如何让div中两个img位置重合
最新发布
06-10
你可以在CSS中给这两个img设置绝对定位，并将它们的位置都设置为相同的值，这样它们就会重合在一起。具体的代码如下： HTML代码： ``` <div class="image-container"> </div> ``` CSS代码： ``` .image-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值