html, css만으로 이미지에 레이어로 워터마크 비스듬히 쓰기

<style>

.imageblock { position: relative; } 
.textWatermark .imageblock::after { 
content: "아빠는 개발자 \a https://programmerdaddy.tistory.com";
color: white; 
font-size: 32px; 
white-space: pre; 
position: absolute; 
width: 80%; 
height: 100px; 
margin: auto; 
top: 0; 
left: 0; 
bottom: 0; 
right: 0; 
opacity: 0.5; 
pointer-events: none;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
}

</style>

<p style="text-align: center; clear: none; float: none;" class="textWatermark">
<span class="imageblock" style="display:inline-block;width:100%;height:auto;max-width:100%">
<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbCKQxp%2FbtqB2vppug5%2F3kjzvvAM1R2C8JFF9of0Uk%2Fimg.jpg" style="max-width:100%;height:auto" >
</span>
</p>

 

 

여러개의 이미지에 적용하려면...

 

<p style="text-align: center; clear: none; float: none;" class="textWatermark">
<span class="imageblock" style="display:inline-block;width:100%;height:auto;max-width:100%">
<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbCKQxp%2FbtqB2vppug5%2F3kjzvvAM1R2C8JFF9of0Uk%2Fimg.jpg" style="max-width:100%;height:auto" >
</span>
<span class="imageblock" style="display:inline-block;width:100%;height:auto;max-width:100%">
<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbCKQxp%2FbtqB2vppug5%2F3kjzvvAM1R2C8JFF9of0Uk%2Fimg.jpg" style="max-width:100%;height:auto" >
</span>
<span class="imageblock" style="display:inline-block;width:100%;height:auto;max-width:100%">
<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbCKQxp%2FbtqB2vppug5%2F3kjzvvAM1R2C8JFF9of0Uk%2Fimg.jpg" style="max-width:100%;height:auto" >
</span>
</p>