css怎么在图片上添加文字

html-css013

css怎么在图片上添加文字,第1张

文字在图片上显示

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="UTF-8">

<style>

#abox{

position:relative/*容器相对定位*/

width:300px/*宽度300px*/

margin:0 auto/*横向居中*/

}

#abox img{

width:300px/*宽度300px*/

}

span{

position:absolute/*文字容器绝对定位*/

display:block/*span转为块元素*/

width:100%/*宽度相对于父容器100%*/

text-align:center/*文字居中*/

top:0/*距离父容器顶部0*/

left:0/*距离父容器左侧0*/

color:red/*文字颜色红色*/

font-size:18px/*文字大小既文字高度18px*/

font-weight:bold/*文字加粗*/

}

</style>

</head>

<body>

<div id="abox"><!--容器,相对定位-->

  <img src="123.jpg"><!--图片-->

  <span>我要显示文字</span><!--文字,绝对定位-->

</div>

</body>

</html>

Fireworks制作简单大方的文字水印效果:

http://tech.163.com/04/0414/14/0JUG2QMN0009rt.html

不知道是不是你问的

css样式不可以重复使用。

这是因为,外部css样式和内部css样式同时存在,以内部css样式为准。

内部css样式与标签的style属性同时存在,以style属性的样式为准。

所以,CSS类的优先级更高,如果存在相同的样式属性,CSS类中的定义的样式会覆盖掉