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

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

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

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

在引入背景图片的时候，我们需要注意背景图片的大小，如果和div大小不同，则我们需要调整background-size属性使图片适配div大小。代码如下：

方法二：绝对定位

对于不能将图片作为背景的情况，用绝对定位的方法即可实现文字置于图片之上，该情况下，图片也可以设置透明度，并且不用设置图片宽高，让其适应父div宽高即可，较为方便。代码如下：

设置了透明度以后，以上代码呈现的效果如下：

方法三：将图片置于底层

除了以上两种方法以外，还可以通过将图片置于底层的方式让文字置于图片之上，这种情况要借助绝对布局和相对布局，不仅可实现两个div层叠的场景，对于更为复杂的场景也适用，实现图片效果的代码如下：

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

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