`

css文字浮在图片上

    博客分类:
  • CSS
css 
阅读更多

 

css文字浮在图片上

 

 

两种办法: 
1.把这张图片做为层的背景background:url(图片路径) 
2.用绝对定位来把层定位到图片上,绝对定位语法:position:absolute;top:坐标;right:坐标;bottom:坐标;left:坐标

<div style= "position:relative "> 
<div style= "position:absolute; left:0; top:0; color:#fff; font-weight:bold "> 图片文字 </div> 
<img src= "http://zi.csdn.net/2007.06/now120x60.gif "> </img> 
</div>

 

注:近期因为在项目中要应用到CSS文字浮在图片之上,本来应该是美工人员做的事,但正好美工又抽不出空来,只好自己在网上找一个,感谢网上分享者! 记载于此,以做备录。

 

分享到:
评论

相关推荐

    css实现文字层浮在图片之上示例代码

    本文将详细介绍如何使用CSS技术使文字层浮在图片之上,确保当鼠标悬停在图片上时,用户能够看到相应的描述信息。 首先,要实现文字层浮在图片之上的效果,关键是要使用CSS的定位属性,通常使用`position: absolute;...

    js利用层文字浮在图上面

    "JS利用层文字浮在图上面"的技术就是一种常见的实现方式。这篇文章将详细讲解如何使用JavaScript(JS)来创建一个浮动在图片上的文字水印效果。 首先,我们需要理解HTML结构。在网页中,我们可以使用`&lt;img&gt;`标签来...

    css3鼠标滑过图片文字动画特效.zip

    "css3鼠标滑过图片文字动画特效"是一个利用CSS3技术实现的网页交互功能,它能增强用户体验,使网页更加生动有趣。这个压缩包可能包含了五个不同的示例,用于展示当鼠标滑过图片时,与图片相关的文字或图层如何产生...

    css常用浮出层(tip效果)的写法

    在CSS部分,通过定义“.poptip”类的样式,设置了浮出层的绝对定位、边距、内边距、文字样式、背景颜色、边框样式、边框圆角以及阴影效果。这些样式共同作用,完成了浮出层的基础视觉效果。 CSS中的“.poptip-arrow...

    dreamweaver中怎么将文字放到图片上?

    在Dreamweaver中将文字放到图片上,主要是通过设置HTML元素的背景图像和结合CSS样式来实现的。以下是一个详细的步骤教程,供你参考: 1. **启动Dreamweaver**: 首先,你需要打开Adobe Dreamweaver软件。无论你...

    光芒四射的CSS3彩色按钮特效集.rar

    3. **阴影(Box Shadow)**:盒阴影可以为按钮添加立体感,模拟光照效果,使按钮看起来仿佛浮在页面上。通过调整阴影的偏移、模糊半径和颜色,可以创造出不同的光影效果。 4. **文本阴影(Text Shadow)**:类似地...

    文字环绕图片的布局效果(使用动态div实现)

    最新的CSS3的分栏属性(http://www.w3.org/TR/css3-multicol/)可以让文字分栏,然后再让图片左浮右浮,以此来实现图片在中间的“假象”。 如何实现“文字环绕图片”的霸道效果呢?!!(虽然感觉很2,没有哪个UI...

    横幅+导航+气泡悬浮框

    CSS3则可以通过设置背景图片、颜色、文字样式等来美化横幅,例如使用background-image属性添加背景图片,使用text-shadow实现文字阴影效果,或者用box-shadow创建横幅的立体感。 【导航(Navigation)制作】 HTML5...

    网页制作---文字特效集锦

    5. **背景图片文字**:将文字与背景图片相结合,可以产生有趣的视觉效果,如使用透明或半透明文字覆盖在图片上,或者使用CSS的`background-clip`属性将背景图像应用于文字。 6. **描边文字**:为文字添加描边效果,...

    通用css样式

    - 为了确保不同浏览器间的一致性,通常会在CSS文件的开头处对全局元素的`margin`和`padding`进行清零处理。 ```css * { margin: 0; padding: 0; } ``` - 这种做法可以消除浏览器默认的内外边距设置带来的显示...

    飘在文字上网页雪花效果.zip

    此外,为了确保雪花在文字或图片上正确显示,JavaScript可能需要获取页面上的元素信息,比如它们的位置和尺寸,以便将雪花定位在这些元素的上方。这通常涉及到DOM(文档对象模型)的操作,如`document.querySelector...

    html5+css3 js特效,表白神器

    在这个表白神器中,CSS3可能被用来创建动态的背景效果、变换的文字样式,甚至可能利用3D转换和透视效果来增加视觉冲击力。 JavaScript作为客户端的脚本语言,是实现动态交互的关键。在表白神器中,开发者可能会使用...

    CSS英文单词汇总.pdf

    CSS 英文单词汇总 CSS(cascading style sheet)是层叠样式表,它是一种用于描述网页外观和格式的标记语言。下面是 CSS 中一些常用的英文单词汇总: 字体样式 * font-size:文字的大小 * font-family:字体 * ...

    Metro界面效果鼠标悬停显示文字.zip

    这种鼠标悬停显示文字的效果也应考虑到响应式设计,确保在不同设备(如桌面、平板、手机)上都能正确显示和交互。这可能涉及到媒体查询(media queries)和流式布局(flexible layout)的运用。 5. **JavaScript...

    CSS常用属性大全.pdf

    一、CSS 文字属性 * `color`: 设置文字颜色,例如 `color: #999999;` * `font-family`: 设置文字字体,例如 `font-family: 宋体, sans-serif;` * `font-size`: 设置文字大小,例如 `font-size: 9pt;` * `font-style...

    css笔记课程笔记2019,5,22

    ** 图片和文字在一起显示 9、案例 图像签名 ** 在图片上面显示文字 10、上午内容总结 1、css和html的四种结合方式(****) 2、css的基本选择器(****) * 标签选择器 使用标签名 * class选择器 .名称 * id...

    漂浮广告插件网页特效

    /* 确保广告在其他元素之上 */ } ``` 为了使广告具有动态效果,我们可以使用JavaScript来监听窗口的滚动事件。当用户滚动页面时,我们可以调整广告的位置,使其始终保持在屏幕可视区域内。以下是一个简单的...

    网站通用浮框

    通常会使用绝对定位使其脱离文档流,并设置`z-index`确保浮框在其他元素之上。例如: ```css #floatBox { position: fixed; bottom: 20px; right: 20px; width: 300px; background-color: white; border: 1...

    css实现悬浮效果的阴影的方法示例

    在网页设计中,CSS(Cascading Style Sheets)是一种用于控制网页元素样式的重要技术。本文将深入探讨如何使用CSS实现悬浮效果的阴影,帮助你创建更具有立体感和深度的界面元素。 首先,我们来看标题所提及的“悬浮...

Global site tag (gtag.js) - Google Analytics