2017-04-26 124 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