css将文字置于图片上的方法

我们在开发的时候，有大量的场景需要将文字至于图片之上，如图:

以上是将“空山新雨后，天气晚来秋”加在图片之上。对于大多数情况，我们都可以将图片作为背景图引入，但有些时候不能将图片作为背景图引入，这个时候就要用到其他的方法，以下我们提供三种方法来实现以上场景。

方法一：引入背景图片(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层叠的场景，对于更为复杂的场景也适用，实现图片效果的代码如下：

<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>

使用该方法时，对于文字的绝对布局，需要用定位元素对文字的位置进行定位。

以上是某对文字置于图片场景的几种尝试，若各位有更为简洁的方法，欢迎留言讨论技术，谢谢。

css将文字置于图片上的方法相关推荐

css之文字在图片上居中显示
< html lang="en"> < head> < meta charset="UTF-8"> < meta na ...
HTML让文字在图片上显示的几种方法
HTML让文字在图片上显示的几种方法第一种方式是image 作为背景图片,即:background:url("......."); 例如如下代码块: <div style= ...
html内容被背景图片遮住怎么办_完美实现文字置于图片之上且背景半透明
之前发过一篇关于将图片的说明文字显示在图片之上且背景半透明效果的文章,讲述了如何将文字置于图片之上且背景半透明,但那个解决办法会出现一个问题,就是背景虽然半透明了,但文字也会半透明,今天发现百度旅 ...
css改变鼠标图片大小,CSS实现鼠标经过图片上图片等比缩放效果（代码实例）
本篇文章给大家带来的内容是关于如何使用CSS实现鼠标经过图片上图片缩放(缓慢变化,有过渡效果,缩放的过程是有动画过渡的)效果,主要用到CSS transform属性,css3 transition属性 ...
php怎么设置文字环绕图片,使用CSS实现文字环绕图片效果
这篇文章主要为大家详细介绍了CSS文字环绕图片遇到的问题及解决方法,感兴趣的小伙伴们可以参考一下 CSS实现文字环绕图片效果文字环绕图片,在Word里只要click一下右键,调一下属性就可以了.但在 ...
将文字置于图片之上，防止鼠标频繁交替触发mouseenter和mouseleave事件
问题描述: 使用标准文档流进行布局,鼠标会频繁触发 mouseenter 和 mouseleave 事件,无法正常修改 spsan 的位置. 该问题需将文字(即 li)置于图片(即 span)之上,防 ...
php上传图片中文,php图片上传方法
php图片上传方法发布于 2015-11-07 21:44:59 | 92 次阅读 | 评论: 0 | 来源: PHPERZ PHP开源脚本语言PHP(外文名: Hypertext Preproce ...
php js 异步上传图片,javascript实现异步图片上传方法实例
如何通过javascript写出异步图片上传?本文我们就和大家分享一些实例代码javascript实现异步图片上传.我们首先看下HTML代码实现的form提交部分.其中大家在测试的时候需要把test的 ...
C#把文字放到图片上
做小程序时遇到一个问题,用户在分享内容的时候,我需要生成一张带有内容的图片,那么如何把文字放到图片上,并生成一张新的图片呢? 先看效果图. 这是背景图接下来上代码. /// <summary& ...

css将文字置于图片上的方法

方法一：引入背景图片(background-image: url(path))

方法二：绝对定位

方法三：将图片置于底层

css将文字置于图片上的方法相关推荐

最新文章

热门文章