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>
你什麼意思通過重複自己做? –