html+css如何在图片上添加文字
2018-09-14
效果如图
思路:div相对定位. 图片默认定位, 文字绝对定位
参考代码
html>
/*div1下面 包含着1个图片和1段文字*/
#div1{
position: relative;/*相对定位*/
width: 267px;
height: 140px;
}
/*图片部分的设置*/
#img1{
/*position: static;默认定位,可以省略*/
width: 100%;
height: 100%;
}
/*文字的设置*/
#span1{
position: absolute;/*绝对定位*/
width: 100%;
bottom: 0px;/*离底下0像素*/
left: 0px;/*离左边0像素*/
text-align: center;
font-size: 18px;
color: white;
}
惬意的海岸,旖旎的风景
其他相关的说明:
你给一个div 添加背景图,不影响在这个div里面添加文字的,比如
.class{width: 200px;height: 200px;background: url("图片路径") no-repeat;}
注释:background: url("图片路径") no-repeat;
repeat: 平铺整个页面,左右与上下
repeat-x: 在x轴上平铺,左右
repeat-y: 在y轴上平铺,上下
no-repeat: 图片不重复
你的文字内容
那么在这个div的背景图片就有了,你在里面写文字就可以了,如果你想给文字放到特定位置的话就需要定位了
实际联系:
代码:
无标题文档.class{width: 600px;height: 600px;background: url("http://img1.91.com/uploads/allimg/131011/645-131011115G5.jpg") no-repeat;}
你的文字内容
效果:
现在 不清楚的是,
如何规范文字的位置以及大小以及字体,颜色。
代码讲解:
无标题文档./这个“.”不可以掉,掉了, 图片就不显示了。/
class{width: 600px;height: 600px/宽和高是定义后面的图片的尺寸的,如果真实的图片比这个参数的数值大,那么就会有图片的部分被裁掉。/;
background: url("http://img1.91.com/uploads/allimg/131011/645-131011115G5.jpg /图片的地址/") no-repeat;}
你的文字内容
第三种理解:
有部分的理解但不是很理解:
用CSS往图片上嵌入文字有二种方法,分别如下:
第一种方法、添加一个DIV,采用绝对定位,图片所属DIV为基准。
参考代码如下:
文字
第二种方法、图片作为背景图片。
参考代码如下:
wenzi
<
免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。
http://www.pinlue.com/style/images/nopic.gif