背景模糊

场景

背景模糊常用于个人中心的头像背景, 音乐播放界面的背景。

Props

名字 类型 默认 描述
url String 图片地址
height Number 200 高度
blur-amount Number 10 模糊程度

Slots

名字 描述
默认slot 图片上面内容

示例

纯背景

<style></style>
<template>
<blur :blur-amount="40" url="https://o3e85j0cv.qnssl.com/tulips-1083572__340.jpg"></blur>
</template>

背景上添加内容

通过默认slot支持

<template>
<blur :blur-amount="40" url="https://o3e85j0cv.qnssl.com/hot-chocolate-1068703__340.jpg">
  <p class="center">
    <img src="https://o3e85j0cv.qnssl.com/hot-chocolate-1068703__340.jpg">
  </p>
</blur>
</template>

<style>
.center {
  text-align: center;
  padding-top: 20px;
  color: #fff;
  font-size: 18px;
}
.center img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #ececec;
}
</style>

results matching ""

    No results matching ""