1.水印文字
```
<html>
<head>
<meta charset="utf-8">
<title>img</title>
<style type="text/css">
.parentBox{
position: relative;
width: 200px;
height: 300px;
}
.parentBox img{
width: 100%;
height: 100%;
}
.parentBox .sk{
position: absolute;
width: 100px;
height: 100px;
top: calc(50% - 50px);
left: calc(50% - 50px);
background: rgba(100,100,100,.6);
border-radius: 50%;
text-align: center;
line-height: 100px;
color: #fff;
border: 5px solid #aaa;
font-size: 20px;
}
</style>
</head>
<body>
<div class="parentBox">
<img src="img/productImg.jpg" alt="">
<div class="sk">售完</div>
</div>
</body>
</html>
```
效果
2.图片作为水印
```
<!DOCTYPE html>
<html>
<head>
<title>img</title>
.parentBox{
position: relative;
width: 200px;
height: 300px;
}
.parentBox img{
width: 100%;
height: 100%;
}
.parentBox .sk{
position: absolute;
width: 100px;
height: 100px;
top: calc(50% - 50px);
left: calc(50% - 50px);
background: rgba(100,100,100,.6);
border-radius: 50%;
text-align: center;
line-height: 100px;
color: #fff;
/* border: 5px solid #aaa; */
font-size: 20px;
background: url(img/sellOut.png) no-repeat;
background-size: 100%;
}
</style>
</head>
<body>
img/productImg.jpg" alt="">
</div>
</div>
</body>
</html>
```
网友评论