Use js to add text to pictures of different sizes

add the words "I am the text" in the a tag to the lower right corner of the picture. The id of each picture is "img". The size of each picture is different, and it is required to be fixed in the lower right corner of each picture. In fact, it is the role of watermark. It requires that you use js and css, instead of canvas. Ask the old driver for advice! 

<a id="text"></a>

<img id="img" src="https://img.codeshelper.com/upload/img/2021/04/05/ov1dpvvcyy115373.png" width="100px" height="100px"></img>
<img id="img" src="https://img.codeshelper.com/upload/img/2021/04/05/ov1dpvvcyy115373.png" width="200px" height="300px"></img>
<img id="img" src="https://img.codeshelper.com/upload/img/2021/04/05/ov1dpvvcyy115373.png" width="400px" height="250px"></img>
<img id="img" src="https://img.codeshelper.com/upload/img/2021/04/05/ov1dpvvcyy115373.png" width="700px" height="810px"></img>
Css javascript
Apr.05,2021


< html >
< head > 

<title></title>
<style type="text/css">
     .common{
     position: relative;
         overflow: hidden;
     }
     .img{
         
         width: 400px;
     }
    .img::after{
        content: '';
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 60px;
        height: 22px;
        line-height: 22px;
        background: -sharpfff;
        color: -sharp000;
        font-size: 15px;
        display: block;
        z-index: 45555
    }
</style>

< / head >
< body >

< div class= "img common" >
https://gd1.alicdn.com/imgext.; width= "400px" height= "300px" / >

< / div >

< / body >
< / html >

the outer div you want to control follows the width of your picture. This is just a realizable idea, depending on your own needs 

<div style='position:relative'>
    <a style='position:absolute;right:0;bottom:0;'></a>
    <img>
</div>

Previous: Ant design pro turns the route into a back-end direct return

Next: Iview assigns an asynchronous value to the data bound to the select component, how to avoid triggering rules verification of Form?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bed47e-31b83.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bed47e-31b83.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?