修正safari下渐变文字不起效的bug

This commit is contained in:
cebgcontract 2022-02-28 19:38:47 +08:00
parent b4abde384c
commit 9522ca2bc5
2 changed files with 17 additions and 8 deletions

View File

@ -103,14 +103,18 @@ export default class extends Vue {
.reward-title{
margin-left: 96px;
width: 610px;
color: transparent;
font-size: 55px;
font-weight: bold;
color: transparent;
background: linear-gradient(to right, #FFE930, #FF8914);
-webkit-background-clip: text;
p{
margin-block-start: 12px;
margin-block-end: 12px;
color: #FFE930;
background-image: linear-gradient(to right, #FFE930, #FF8914);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.reward-desc{

View File

@ -2,8 +2,8 @@
<section id="center-section" data-anchor="top">
<div class="reward-info">
<div class="reward-title">
<p>About Crypto Elite's:</p>
<p>BATTLEGROUNDS(CEBG)</p>
<div>About Crypto Elite's:</div>
<div>BATTLEGROUNDS(CEBG)</div>
</div>
<div class="reward-desc">
<p>Crypto Elite's: BATTLEGROUNDS(CEBG) is a light online multiplayer Battle Royale game. </p>
@ -100,16 +100,19 @@ export default class MobileCenterSection extends Vue {
width: 100vw;
margin-top: 11.2vw;
.reward-title{
display: inline-block;
margin-left: 7.7vw;
width: 100%;
color: transparent;
font-size: 6vw;
font-weight: bold;
background: linear-gradient(to right, #FFE930, #FF8914);
-webkit-background-clip: text;
p{
width: fit-content;
div{
margin-block-start: 12px;
margin-block-end: 12px;
width: fit-content;
color: #FFE930;
background-image: linear-gradient(to right, #FFE930, #FF8914);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.reward-desc{
@ -120,6 +123,8 @@ export default class MobileCenterSection extends Vue {
p{
margin-block-start: 8px;
margin-block-end: 8px;
color: #EDEDED;
font-size: 4vw;
}
}
}