topverse
/
TOPVERSE_Official
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mask

This commit is contained in:
胡鑫 2023-04-26 20:28:32 +08:00
parent b6baf1fdf6
commit c577ee4b25
2 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Carousel.vue
View File

@ -52,7 +52,7 @@ useIntervalFn(() => {
{{ $t(item.entry) }} {{ $t(item.entry) }}
</ABtn> </ABtn>
</div> </div>
<img style="mask-image:linear-gradient(0deg,transparent ,#000 80%, transparent 190%)" :src="item.img"> <img style="-webkit-mask-image:linear-gradient(0deg,transparent ,#000 80%, transparent 190%)" :src="item.img">
</div> </div>
<!-- <ACard <!-- <ACard
:title="item.title" :title="item.title"

4
pages/index.vue
View File

@ -112,7 +112,7 @@ const imgs = [
<Section <Section
relative h-380px md:h-400px xl:h-450px relative h-380px md:h-400px xl:h-450px
> >
<div absolute left-0 top-0 z-0 h-full w-full bg-cover bg-center bg-no-repeat style="background-image: url(https://landvault.io/img/asset/YXNzZXRzL2ltYWdlcy9vdGhlcnNpZGUuanBn?w=1920&h=480&fit=crop&fm=webp&s=a53969e9e8ddeda15dab9b724a6af3f6);mask-image:linear-gradient(0deg, transparent, #000);" /> <div absolute left-0 top-0 z-0 h-full w-full bg-cover bg-center bg-no-repeat style="background-image: url(https://landvault.io/img/asset/YXNzZXRzL2ltYWdlcy9vdGhlcnNpZGUuanBn?w=1920&h=480&fit=crop&fm=webp&s=a53969e9e8ddeda15dab9b724a6af3f6);-webkit-mask-image:linear-gradient(0deg, transparent, #000);" />
<Section absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center text-white text-shadow> <Section absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center text-white text-shadow>
<h2 class="text-h2"> <h2 class="text-h2">
{{ $t('home.sectionFour.topic') }} {{ $t('home.sectionFour.topic') }}
@ -186,7 +186,7 @@ const imgs = [
<Section <Section
relative h-380px md:h-400px xl:h-450px relative h-380px md:h-400px xl:h-450px
> >
<div absolute left-0 top-0 z-0 h-full w-full bg-cover bg-center bg-no-repeat style="background-image: url(https://landvault.io/img/asset/YXNzZXRzL2ltYWdlcy9vdGhlcnNpZGUuanBn?w=1920&h=480&fit=crop&fm=webp&s=a53969e9e8ddeda15dab9b724a6af3f6);mask-image:linear-gradient(0deg, transparent, #000);" /> <div absolute left-0 top-0 z-0 h-full w-full bg-cover bg-center bg-no-repeat style="background-image: url(https://landvault.io/img/asset/YXNzZXRzL2ltYWdlcy9vdGhlcnNpZGUuanBn?w=1920&h=480&fit=crop&fm=webp&s=a53969e9e8ddeda15dab9b724a6af3f6);-webkit-mask-image:linear-gradient(0deg, transparent, #000);" />
<Section absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center text-white text-shadow> <Section absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center text-white text-shadow>
<p class="text-title"> <p class="text-title">
{{ $t('home.sectionSeven.title') }} {{ $t('home.sectionSeven.title') }}