利用css布局在图片插入文字

在图片里添加文字)

1、【background】引用背景图片,

两种引用:

css:{background:URL(img.jpg)}

html: <a src="img.jpg"></a>

 

2、建立需要尺寸的div块, 在新建一个div块,,利用原始的覆盖现有的。

3、块需被包含在图片【div】块里,再包含文字【div】块。

4、注需要控制方向【 float】。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片添加文字</title>
<style type="text/css">      
.div{width:800px; height:450px;}
.img{width:800px; height:450px; background:url(../img.jpg);}
.imgfont{ width:650px; height:400px; float:right;}
.font{ width:650px; height:50px; float:right;}
.fontt{width:180px;height:50px; text-align:center; color:#FFF; font-size:16px;}
</style>
</head>

<body>
<div class="img">
 <div class="imgfont">
  </div>
   <div class="font">
     <div class="fontt">
      <p>这是一张图片</p>
       </div>
    </div>
</div>
</body>
</html>

 

转载于:https://www.cnblogs.com/boyblog/p/4592778.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值