CSS属性fit-content示例介绍

1

2

3

4

5

6

<div class="content">

  <img src="src\assets\404_images\xxmLogo.png" alt="">

  <div class="frosted-glass">

    <p>This is a frosted glass effect.</p>

  </div>

</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

.frosted-glass {

  position: absolute;

  top: 10vh;

  left: 0;

  right: 0;

  margin: auto;

  width: fit-content;

  background: rgba(0, 0, 0, 0.3);

  font-size: 28px;

  color: #fff;

  border-radius: 40px;

  padding: 8px 28px;

  backdrop-filter: blur(10px);

}

.content {

  position: relative;

  width: 800px;

  height: 800px;

}

img {

  width: 100%;

  height: 100%;

}