版权声明:王迪 https://blog.csdn.net/dnruanjian/article/details/85290921
实现效果:让文字悬浮在图片上方
方法一:给盒子添加一个背景图片,盒子里写文字即可。
制作思路:自带背景属性的盒子,那么盒子里面的文字自然显示在图片上方。
实现代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html中让文字显示在图片上方-div+css方法</title>
<style type="text/css">
#da{
width:577px;/*设置盒子的宽高,可以根据作为背景的图片宽高来进行设置*/
height:400px;
background-image:url(3.jpg);/*设置盒子的背景图片*/
background-repeat:no-repeat;/*设置背景图片不重复*/
}
</style>
</head>
<body>
<div id="da">
让文字显示在图片上方
</div>
</body>
</html>
思考:如果想控制文字的显示位置,可以通过设置盒子的padding属性来实现。也可以给文字添加一个父级盒子进行设置。
注意:此方法受限于背景图片的大小,不推荐使用。
方法二:利用div+css,通过设置position属性实现。
制作思路:
1、制作一个父级盒子,用来装图片和文字。父级盒子设置相对定位。
2、分别制作两个盒子用来装图片和文字,设置两个子级盒子绝对定位。
3、父相子绝里,子元素出现重叠时,可以通过z-index属性,来控制显示层次顺序(z-index取值大的会压住取值小的元素)。
扫描二维码关注公众号,回复:
5269324 查看本文章
实现代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html中让文字显示在图片上方-div+css方法</title>
<style type="text/css">
#da{
position:relative;/*设置父级元素,相对定位*/
}
#tu,#dh {
position:absolute;/*设置子元素绝对定位*/
}
#dh{ /*设置文字盒子的样式*/
top:10px; /*相对于父级元素,向下移10px*/
width:577px; /*设置文字盒子的宽度,这里设置其和图片宽度一致*/
height:40px;
line-height:40px;/*设置行高和高度一样,可以实现单行元素,在垂直方向上的居中*/
text-align:center;/*设置文字水平居中*/
background-color:#FFF;/*设置盒子背景颜色为白色*/
opacity:0.6;/*设置背景颜色透明度为0.6*/
}
</style>
</head>
<body>
<div id="da">
<div id="tu"><img src="3.jpg" /></div>
<div id="dh">让文字显示在图片上方</div>
</div>
</body>
</html>
扩展知识:设置背景颜色的透明度
方法一:通过backgroud和opacity设置
如: background-color:#FFF; /*设置盒子背景颜色*/
opacity:0.6; /*设置背景颜色透明度(取值从 0.0 (完全透明)到 1.0(完全不透明))*/
方法二:通过rgba方式设置
如:background:rgba(0,0,0,0.5);
RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。
注意:rgba存在兼容性问题:针对IE9以下浏览器不兼容。
===========================这里是结束分割线==================================