javascript&jquery

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

에스크리토 2021. 7. 27. 13:35
반응형

<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%2Fdna%2FbCKQxp%2FbtqB2vppug5%2FAAAAAAAAAAAAAAAAAAAAAF-V8Mrvu2uM2INcDL1L2wM3zkpE5HIR1CuGrrx31lis%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1767193199%26allow_ip%3D%26allow_referer%3D%26signature%3DlBxi1Pd1OUPPy%252FgZUl6%252BUewSwlA%253D" 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%2Fdna%2FbCKQxp%2FbtqB2vppug5%2FAAAAAAAAAAAAAAAAAAAAAF-V8Mrvu2uM2INcDL1L2wM3zkpE5HIR1CuGrrx31lis%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1767193199%26allow_ip%3D%26allow_referer%3D%26signature%3DlBxi1Pd1OUPPy%252FgZUl6%252BUewSwlA%253D" 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%2Fdna%2FbCKQxp%2FbtqB2vppug5%2FAAAAAAAAAAAAAAAAAAAAAF-V8Mrvu2uM2INcDL1L2wM3zkpE5HIR1CuGrrx31lis%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1767193199%26allow_ip%3D%26allow_referer%3D%26signature%3DlBxi1Pd1OUPPy%252FgZUl6%252BUewSwlA%253D" 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%2Fdna%2FbCKQxp%2FbtqB2vppug5%2FAAAAAAAAAAAAAAAAAAAAAF-V8Mrvu2uM2INcDL1L2wM3zkpE5HIR1CuGrrx31lis%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1767193199%26allow_ip%3D%26allow_referer%3D%26signature%3DlBxi1Pd1OUPPy%252FgZUl6%252BUewSwlA%253D" style="max-width:100%;height:auto" >
</span>
</p>

반응형