我们在开发的时候,有大量的场景需要将文字至于图片之上,如图:
微信号:gaogaojie5
添加微信好友, 获取更多信息
复制微信号
添加微信好友, 获取更多信息
复制微信号
以上是将“空山新雨后,天气晚来秋”加在图片之上。对于大多数情况,我们都可以将图片作为背景图引入,但有些时候不能将图片作为背景图引入,这个时候就要用到其他的方法,以下我们提供三种方法来实现以上场景。
方法一:引入背景图片(background-image: url(path))
在引入背景图片的时候,我们需要注意背景图片的大小,如果和div大小不同,则我们需要调整background-size属性使图片适配div大小。代码如下:
<div id="container"> <div class="imgbox box1">空山新雨后,天气晚来秋</div> </div> <style> #container .imgbox{ height: 216px; width: 384px; } #container .box1 { font-size: 20px; color: ivory; background-image: url(../static/images/redLeafage.jpg); background-size: 384px 216px; /* background-size: inherit; */ background-repeat: no-repeat; text-align: right; } </style>
方法二:绝对定位
对于不能将图片作为背景的情况,用绝对定位的方法即可实现文字置于图片之上,该情况下,图片也可以设置透明度,并且不用设置图片宽高,让其适应父div宽高即可,较为方便。代码如下:
<div id="container"> <p>法一:</p> <div class="imgbox"> <img src="../static/images/redLeafage.jpg"> <lable>空山新雨后,天气晚来秋</lable> </div> </div> <style> #container .imgbox{ height: 216px; width: 384px; } #container img { position: absolute;/*设为绝对定位*/ opacity: 0.7;/*设置透明度*/ } #container lable { width: inherit; text-align: right; font-size: 20px; color: ivory; position: absolute;/*设为绝对定位*/ } </style>
设置了透明度以后,以上代码呈现的效果如下:
方法三:将图片置于底层
<div class="imgbox"> <!-- 最外层div设置为绝对定位 --> <div style="position: absolute;"> <img class="box-img" src="../static/images/redLeafage.jpg"> <div class="box-font">空山新雨后,天气晚来秋</div> </div> </div> <style> #container .imgbox{ height: 216px; width: 384px; } #container .box-img { position: relative;/*相对布局*/ z-index: -1;/*置于底层*/ } #container .box-font { font-size: 20px; color: ivory; position: absolute;/*绝对布局*/ z-index: 1;/*置于上层*/ display: inline; top: 0; right: 0; } </style>
转载声明:本站发布文章及版权归原作者所有,转载本站文章请注明文章来源!