<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>
'javascript&jquery' 카테고리의 다른 글
[PHP]첨부파일 확장자및 용량 알아내기 (0) | 2023.06.26 |
---|---|
jquery에서 ajax로 가져온 데이터를 html로 입력하려고 하는데 입력 안될때 (0) | 2021.08.17 |
html, css만으로 이미지에 레이어로 워터마크 비스듬히 쓰기 (0) | 2021.07.27 |
jquery json으로 받은 여러개의 값을 반복문(each)를 이용해 출력하기 (0) | 2021.05.25 |
jquery submit 할때 로딩중 이미지 페이지(화면) 한 가운데 띄우기 (1) | 2021.05.10 |