html怎么实现在图片左下角显示文字同时可以在右侧显示文字并且自适应手机浏览器

可以使用CSS中的position属性和float属性来实现在图片左下角和右侧显示文字，并且可以自适应手机浏览器的效果。

示例代码如下：

HTML部分：

<div class="img-container">
  <img src="example.jpg">
  <div class="text-bottom-left">文字1</div>
  <div class="text-top-right">文字2</div>
</div>

CSS部分：

.img-container {
  position: relative;
  display: inline-block;
}

.text-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 5px;
  font-size: 14px;
}

.text-top-right {
  float: right;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 5px;
  font-size: 14px;
}

解释：

首先，我们使用position: relative属性来让img-container容器相对于文档流定位，在其中放置img和文字div元素。
对于位于左下角的文字，我们使用position: absolute属性，同时设置bottom和left属性为0，让它相对于父容器的左下角定位。
对于位于右上角的文字，我们使用float: right属性，将其向右浮动，并设置背景色、文字颜色、内边距和字体大小等样式。

这样，就可以在图片上实现左下角和右上角的文字显示，并且可以自适应手机浏览器的效果。