반응형

<script  src="http://code.jquery.com/jquery-latest.min.js"></script>

<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">


<img id="wrapMe" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbCKQxp%2FbtqB2vppug5%2F3kjzvvAM1R2C8JFF9of0Uk%2Fimg.jpg">

<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbCKQxp%2FbtqB2vppug5%2F3kjzvvAM1R2C8JFF9of0Uk%2Fimg.jpg">

<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbCKQxp%2FbtqB2vppug5%2F3kjzvvAM1R2C8JFF9of0Uk%2Fimg.jpg">

</p>


<script>
$( document ).ready(function() {
$('img').wrap('<span class="imageblock" style="display:inline-block;width:100%;height:auto;max-width:100%"></span>');
});

</script>

반응형

+ Recent posts