Card 卡片

自定义样式

移步到 CSS Part。

基本用法

TIP

背景图片是通过元素上的 style 属性中的 background | background-image 样式来设置的。

查看代码

css

.main-wrap {
  width: 100%;
  height: 20rem;

  display: flex;
}

html

<div class="main-wrap">
  <gr-hover-card
    title="官方周边"
    desc="products"
    color="blue"
    href="/"
    style="background-image: url(./assets/imgs/other/官方周边.png);"
  >
  </gr-hover-card>
  <gr-hover-card
    title="官方漫画"
    desc="cartoon"
    color="red"
    style="background-image: url(./assets/imgs/other/官方漫画.png);"
  ></gr-hover-card>
  <gr-hover-card
    title="WIKI攻略"
    desc="introduction"
    color="aqua"
    style="background-image: url(./assets/imgs/other/WIKI攻略.png);"
  ></gr-hover-card>
</div>

Attributes

参数	说明	类型	可选值	默认值
title	标题名	string	-	-
desc	副标题	string	-	-
color	主题色	string	-	-
href	链接	string	-	-

Css Part

用法可参考 MDN ::part()伪类

参数	说明
container	根容器
info-wrap	遮罩层
title	标题
desc	副标题