鍍金池/ 問答/HTML/ 用js給大小不同的圖片添加文字

用js給大小不同的圖片添加文字

將a標簽里的“我是文字” 這4個字 添加到圖片 的右下角，每張圖片id為“img”每張圖片大小不同，要求固定在每張圖片的右下角，其實也就是水印的作用，要求用js和css，不要用canvas。求老司機指點！

<a id="text">我是文字</a>

<img id="img" src="https://gd1.alicdn.com/imgextra/i2/183574891/TB2fvT9dwjN8KJjSZFgXXbjbVXa_!!183574891.png" width="100px" height="100px"></img>
<img id="img" src="https://gd1.alicdn.com/imgextra/i2/183574891/TB2fvT9dwjN8KJjSZFgXXbjbVXa_!!183574891.png" width="200px" height="300px"></img>
<img id="img" src="https://gd1.alicdn.com/imgextra/i2/183574891/TB2fvT9dwjN8KJjSZFgXXbjbVXa_!!183574891.png" width="400px" height="250px"></img>
<img id="img" src="https://gd1.alicdn.com/imgextra/i2/183574891/TB2fvT9dwjN8KJjSZFgXXbjbVXa_!!183574891.png" width="700px" height="810px"></img>
回答
編輯回答
厭遇

<!DOCTYPE html>
<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: #fff;
        color: #000;
        font-size: 15px;
        display: block;
        z-index: 45555
    }
</style>

</head>
<body>

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

</div>

</body>
</html>

你要控制的外層div 跟著你圖片寬度走,這個只是個可以實現(xiàn)思路，具體看你自己的需求

2017年7月2日 22:13
編輯回答
只愛你
<div style='position:relative'>
    <a style='position:absolute;right:0;bottom:0;'></a>
    <img>
</div>
………
2017年6月18日 07:59