响应式图片上文字内容定位

图片响应式：img {

max-width: 100%;

height: auto;

}

左上角：.container {

    position: relative;

}

.topleft {

    position: absolute;

    top: 8px;

    left: 16px;

    font-size: 18px;

}

img {

    width: 100%;

    height: auto;

    opacity: 0.3;

}

<div  class="container">

<img src="   #">

<div class=" topleft">左上角</div>

</div>

右上角：.container {

    position: relative;

}

.topright {

    position: absolute;

    top: 8px;

    right: 16px;

    font-size: 18px;

}

img {

    width: 100%;

    height: auto;

    opacity: 0.3;

}

左下角：.container {

    position: relative;

}

.bottomleft {

    position: absolute;

    bottom: 8px;

    left: 16px;

    font-size: 18px;

}

img {

    width: 100%;

    height: auto;

    opacity: 0.3;

}

右下角：.container {

    position: relative;

}

.bottomright {

    position: absolute;

    bottom: 8px;

    right: 16px;

    font-size: 18px;

}

img {

    width: 100%;

    height: auto;

    opacity: 0.3;

}

居中：.container {

    position: relative;

}

.center {

    position: absolute;

    left: 0;

    top: 50%;

    width: 100%;

    text-align: center;

    font-size: 18px;

margin-top:-9px;

}

img {

    width: 100%;

    height: auto;

    opacity: 0.3;

}