效果如图所示
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片水印方案二-主图做背景</title> <style> div{ width: 400px; height: 250px; background-image: url("images/xk1.jpg"); background-size: 100%; /*背景缩放*/ position: relative; display: inline-block; } div img{ width: 100px; } .sYin{ position: absolute; left: 0; bottom: 0; opacity: 0.5; } </style> </head> <body> <div> <span class="sYin"> <img src="images/sy1.jpg"><br><br><br><br> 作者:小毛裤 </span> </div> </body> </html>