如何为图片实现侧边模糊的CSS效果？

我正在使用styled-components组件库，想要为图片实现侧边模糊效果，当前组件代码如下：

import React from "react";
import styled from "styled-components";

const StyledTopicItem = styled.div`
  position:relative;
  height: 2.5rem;
  border: 1px solid black;
  border-radius: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  height:20vh;
  justify-content:center
`;


const Topic = styled.div`
position:absolute;
bottom:1px;
font-weight:bold;
`


interface topicItemProps {
  topic: string;
  setSelectedTopic: (value: string) => void;
}

export const TopicItem = ({ topic, setSelectedTopic }: topicItemProps) => {
  return (
    <StyledTopicItem
      onClick={(e: any) => {
        setSelectedTopic(e.target?.innerText);
      }}
    >
      <img  alt={""} src={'https://images.unsplash.com/photo-1514921674539-8b1710289b0d?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzNDE2fDB8MXxyYW5kb218fHx8fHx8fHwxNjQyNjg0OTgz&ixlib=rb-1.2.1&q=85'} height={150} width={250}/> <br/>
    <Topic>{topic}</Topic>
    </StyledTopicItem>
  );
};

实现方案 #

可以通过给图片添加容器，利用伪元素生成与原图一致的模糊层并定位在侧边来实现效果。以下是修改后的完整代码：

import React from "react";
import styled from "styled-components";

const StyledTopicItem = styled.div`
  position: relative;
  border: 1px solid black;
  border-radius: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 20vh;
  justify-content: center;
  overflow: hidden; /* 防止模糊层超出容器范围 */
`;

// 新增图片容器，承载原图和模糊侧边层
const ImgWrapper = styled.div<{ imgSrc: string }>`
  position: relative;
  display: inline-block;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: -40px; /* 控制模糊侧边的偏移位置 */
    width: 60px; /* 模糊侧边的宽度 */
    height: 100%;
    background-image: url(${props => props.imgSrc});
    background-size: cover;
    background-position: left center;
    filter: blur(12px); /* 模糊强度，数值越大效果越明显 */
    transform: scaleX(1.2); /* 拉伸模糊层，避免边缘出现空白 */
  }
`;

const Topic = styled.div`
  position: absolute;
  bottom: 4px;
  padding: 0 8px;
  background-color: rgba(255,255,255,0.7); /* 增加半透背景提升文字可读性 */
  font-weight: bold;
`;

interface topicItemProps {
  topic: string;
  setSelectedTopic: (value: string) => void;
  imgSrc: string;
}

export const TopicItem = ({ topic, setSelectedTopic, imgSrc }: topicItemProps) => {
  return (
    <StyledTopicItem
      onClick={() => {
        setSelectedTopic(topic); /* 直接使用topic参数，避免e.target.innerText的异常情况 */
      }}
    >
      <ImgWrapper imgSrc={imgSrc}>
        <img alt={topic} src={imgSrc} height={150} width={250} style={{ display: 'block' }} />
      </ImgWrapper>
      <Topic>{topic}</Topic>
    </StyledTopicItem>
  );
};

关键说明 #

1. ImgWrapper容器：通过::after伪元素生成模糊层，复用传入的图片地址，保证模糊效果与原图完全匹配
2. 模糊层参数调整：
   • right和width控制模糊侧边的位置和宽度，可根据需求自定义
   • filter: blur()控制模糊强度，数值越大模糊程度越高
   • transform: scaleX()拉伸模糊层，避免因模糊算法导致边缘出现空白区域
3. 点击逻辑优化：直接使用topic参数赋值，避免依赖e.target.innerText可能出现的点击元素异常问题
4. 文字可读性优化：给Topic组件添加半透明背景，避免文字被图片或模糊层遮挡

内容的提问来源于stack exchange，提问作者SEB