2017-04-26 6 views
0

私は本当にバックグラウンド勾配が繰り返されないように修正する方法はありません。私は多くの研究をしましたが、ほとんどの事柄は助けになりません。私はそれが私の論文のために本当に必要なので、本当に助けに感謝します。事前に感謝します。バックグラウンドカラーグラデーションの繰り返しを停止するにはどうすればいいですか? (css)

@import url(https://fonts.googleapis.com/css?family=Fjalla+One); 
 

 
body, html { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    font-family: 'Fjalla One', sans-serif; 
 
} 
 

 
body{ 
 
    font-family: 'Fjalla One', sans-serif; 
 
    background: #2C3E50; /* fallback for old browsers */ 
 
    background: -webkit-linear-gradient(to top, #4CA1AF, #2C3E50); /* Chrome 10-25, Safari 5.1-6 */ 
 
    background: linear-gradient(to top, #4CA1AF, #2C3E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
 
    } 
 

 
#GridView1{ 
 
    border-radius: 10px; 
 
} 
 

 
    h1{ 
 
    text-transform: uppercase; 
 
    font-size: 60px; 
 
    letter-spacing: 2px; 
 
    text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px; 
 
    text-align: center; 
 
    line-height: 60px; 
 
    } 
 

 
    .icon-div { 
 
    display: inline-block; 
 
    padding: 20px; 
 
    } 
 

 

 
.icon { 
 
    display: inline; 
 
    -webkit-transform: perspective(1px) translateZ(0); 
 
    transform: perspective(1px) translateZ(0); 
 
    box-shadow: 0 0 1px transparent; 
 
    -webkit-transition-duration: 0.3s; 
 
    transition-duration: 0.3s; 
 
    -webkit-transition-property: box-shadow, transform; 
 
    transition-property: box-shadow, transform; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    color: white; 
 
    border-radius: 35px; 
 
    width: 170px; 
 
    height: 170px; 
 
    text-align: center; 
 
    margin-bottom: 20px; 
 
    } 
 

 
#animatie1.icon { 
 
    position: relative; 
 
    animation-name: animatieboven; 
 
    animation-duration: 1s; 
 
} 
 

 
@keyframes animatieboven { 
 
    0% { 
 
     top: -20px; 
 
    } 
 

 
    100% { 
 
     top: 0px; 
 
    } 
 
}
<div style="text-align: center;"> 
 
      <div align="center" class="icon-div" id="Afspraken" style="display: inline-block;"> 
 
      <a href="../Menu/indexmenu.aspx"> 
 
       <img src="https://www.icloud.com/system/cloudos/17BHotfix5/cloudos_foundation/17BHotfix5/en-us/source/resources/images/app_icons/[email protected]" id="animatie1" class="icon"/> 
 
      </a> 
 
       <h1 style="text-align: center; color:white;">Situaties</h1> 
 
     </div> 
 
    </div>

+0

あなたは繰り返し、それ自体では何を意味するのですか? –

答えて

0

CSSプロパティbackground-repeat: no-repeat;を使用してください。

あなたはここで詳細情報を見ることができます - >Background-repeat

関連する問題