2017-04-11 10 views
0

최근에 SPAN ans Marquee 태그로 html로 애니메이션 이미지를 만들었습니다. 그리고 지금이 이미지에 대한 다운로드 링크를 만들고 싶지만 어떻게 해야할지 모르겠습니다. 사람이 내 Online Project 애니메이션 이미지의 다운로드 링크를 만드는 방법

<html> 
 
    <head> 
 
    <title> Marquee </title> 
 
    <link href="style.css" rel="stylesheet" type="text/css" /> 
 
    </head> 
 
    
 
<body> 
 

 
<div id="figure"> 
 
    <img src="a.jpg" name="images"/> 
 
    <div class="figcaption"> 
 
    <span> 
 
    <h2> Believe In Your Self!!!</h2> 
 
     <span class='spacer'></span> 
 
     <br /> 
 
     <span class='spacer' align='right'></span> 
 
     <h3><marquee>By: Ajay Rathod</marquee></h3> 
 
    </span> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

h3 
{ 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 700; 
    color: white; 
    background: black; /* fallback */ 
    background: rgba(0, 0, 0, 0.7); 
    padding: .5em; 
} 
#figure { 
    position: relative; 
} 
#figure img { 
    display: block; /* removes trailing whitespace */ 
    outline: solid #000 1px; 
    width:100%; 
} 
.figcaption { 
    position: absolute; 
    bottom: 10%; 
    width: 501px; 
    margin: 0; 
    font-size: 1.5rem; 
    font-weight: bold; 
    line-height: 200%; 
    text-transform: capitalize; 
    } 
.figcaption span h2{ 
    color: white; 
    background: black; /* fallback */ 
    background: rgba(0, 0, 0, 0.7); 
    padding: .5em; 

    &.spacer { 
     padding: 0 5px; 
     background: transparent; 

    &::before { content: " "; } 
     } 
.figcaption span h3{ 
    color: white; 
    background: black; /* fallback */ 
    background: rgba(0, 0, 0, 0.7); 
    padding: .5em; 

    &.spacer { 
     padding: 0 5px; 
     background: transparent; 

    &::before { content: " "; } 

    } 
+0

실제로 jquery 플러그인을 많이 사용할 수 있습니다. –

답변

0

당신이

<a download="name.jpg" href="Image-Path" title="Image-Name"> 
<img src="a.jpg" name="images"/> 
</a> 

link를 참조하십시오 수행하여 다운로드 링크와 같은 이미지를 만들 수 있습니다

... 제발 도와주세요 브라우저 호환성을 위해