前端小案例1：用css实现蒙层效果

前端小案例1：用css实现蒙层效果

我想要在react的函数组件中实现如下效果：首先dom结构中有一个slider组件用于展示当前的亮度条，如果在 flag为true的情况下，就给当前页面上覆盖一张透明度为0.8图片。有一个按钮会切换flag的值。

import React, { useState } from 'react';
import './SliderComponent.less'; // 导入 Less 样式文件

function SliderComponent() {
  const [flag, setFlag] = useState(true);

  // 根据 flag 返回覆盖图片的 JSX
  function renderOverlay() {
      return (
        <div className="overlay">
          <img src="overlay-image.png" alt="Overlay Image" />
        </div>
      );
  }

  // 切换 flag 的值
  function toggleFlag() {
    setFlag(!flag);
  }

  return (
    <div className="slider-container">
      <div className="slider">
        {/* Slider 的内容 */}
      </div>
      {flag && renderOverlay()}
      <button onClick={toggleFlag}>Toggle Flag</button>
    </div>
  );
}

export default SliderComponent;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

在上述代码中，我们通过 import 语句导入名为 SliderComponent.less 的 Less 样式文件，该文件应与 Slider 组件的 JavaScript 文件在同一目录下。然后，我们在组件的根元素上使用 className 属性来应用相应的样式类。

根据你的需求，你可以在 SliderComponent.less 文件中定义样式规则，例如：

.slider-container {
  /* 容器样式 */
}

.slider {
  /* Slider 样式 */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

请根据你的实际需求在 SliderComponent.less 文件中定义所需的样式规则。然后，确保在使用 Less 样式文件时正确配置了 Less 编译环境，以便在构建或运行应用程序时将 Less 样式文件编译为 CSS 并应用到对应的组件上。

更近一步：让蒙层只在局部展现

上述的样式中，图片是全局覆盖的，我只想让它覆盖住slider组件可以吗?

可以！如果你只想让图片覆盖 Slider 组件而不是整个容器，你可以将图片的父元素设置为 Slider 组件，并在样式中对其进行定位。以下是一个示例：

import React, { useState } from 'react';
import './SliderComponent.less'; // 导入 Less 样式文件

function SliderComponent() {
  const [flag, setFlag] = useState(true);

  // 根据 flag 返回覆盖图片的 JSX
  function renderOverlay() {
    if (flag) {
      return (
        <div className="slider-overlay">
          <img src="overlay-image.png" alt="Overlay Image" />
        </div>
      );
    }
    return null;
  }

  // 切换 flag 的值
  function toggleFlag() {
    setFlag(!flag);
  }

  return (
    <div className="slider-container">
      <div className="slider">
        {/* Slider 的内容 */}
        {renderOverlay()}
      </div>
      <button onClick={toggleFlag}>Toggle Flag</button>
    </div>
  );
}

export default SliderComponent;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

在上述代码中，我们将图片的父元素设置为 Slider 组件，并为该父元素添加了名为 slider-overlay 的样式类。

然后，在 SliderComponent.less 文件中，你可以定义相应的样式规则，例如：

.slider-container {
  /* 容器样式 */
}

.slider {
  /* Slider 样式 */
  position: relative;
}

.slider-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.slider-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

这样，图片将会覆盖 Slider 组件而不是整个容器。