企业布局首页产品文字适配图片

[pu-007]

• 是否为已有功能：否
• 建议阐述：目前产品文字固定为黑色或白色，背景图颜色相近看不清。
  可以实现这样的效果

我额外写了个 css

/* 统一采用深色风格样式，强制浅色文字，丝滑渐变 */
.p-block.bgimg {
    position: relative;
    padding-top: 40px;
    padding-bottom: 20px;
    transition: all 0.3s ease;
}

/* 深色渐变背景遮罩 - 修复丝滑渐变效果 */
.p-block.bgimg::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, 
                rgba(0,0,0,0.7) 0%, 
                rgba(0,0,0,0.5) 20%,
                rgba(0,0,0,0.3) 50%,
                rgba(20,20,20,0.4) 80%, 
                rgba(40,40,40,0.5) 100%);
    z-index: 1;
    transition: background 0.3s ease;
}

/* 文字定位和效果 */
.p-block.bgimg a, 
.p-block.bgimg h3.go, 
.p-block.bgimg p.desc {
    position: relative;
    z-index: 2;
    transition: text-shadow 0.3s ease, color 0.3s ease;
}

/* 标题样式 - 黑色描边 + 强制浅色文字 */
.p-block.bgimg h3.go {
    text-shadow: 
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 0 6px rgba(0,0,0,0.9),
        0 0 10px rgba(0,0,0,0.7);
    font-weight: bold;
    margin-top: 10px;
    color: #ffffff !important; /* 强制浅色 */
}

/* 描述文本样式 - 黑色描边 + 强制浅色文字 */
.p-block.bgimg p.desc {
    text-shadow: 
        -0.5px -0.5px 0 #000,  
        0.5px -0.5px 0 #000,
        -0.5px 0.5px 0 #000,
        0.5px 0.5px 0 #000,
        0 0 5px rgba(0,0,0,0.8);
    line-height: 1.5;
    color: #f5f5f5 !important; /* 强制浅色 */
}

/* 链接强制浅色 */
.p-block.bgimg a {
    color: #ffffff !important;
}

/* 悬停效果 - 丝滑过渡到稍微不同的渐变 */
.p-block.bgimg:hover::before {
    background: linear-gradient(to bottom, 
                rgba(0,0,0,0.75) 0%, 
                rgba(0,0,0,0.6) 25%,
                rgba(0,0,0,0.4) 50%,
                rgba(20,20,20,0.5) 75%, 
                rgba(40,40,40,0.6) 100%);
}