fix(landing): 产品图硬边框融进页面白底(径向遮罩)
## 问题 上一提交把产品图换成分栏布局后,图片是 4:3 矩形、自带浅灰蓝渐变背景, 贴在页面白底上出现一道**明显的竖直硬边** —— 柜子像被"贴"上去而不是融在页面里。 (用户看截图指出"这个过渡很突然"。) ## 修法 给 `.hero img` 加**径向渐变遮罩**,让中心(柜体)保持不透明、四缘渐变透明: ```css -webkit-mask-image: radial-gradient(ellipse 72% 86% at 50% 50%, #000 58%, transparent 92%); mask-image: radial-gradient(ellipse 72% 86% at 50% 50%, #000 58%, transparent 92%); ``` 椭圆半径按**柜体在画面里的实际占比**取(约占宽 50%、高 84%), 因此柜体完全落在实心区内不受影响,只有图片自身的背景在边缘处化开。 同时**移除 CSS `drop-shadow`**:遮罩会把它一起切掉,导致影子被拦腰截断; 且这张图自带地面投影,CSS 投影本来也是多余的。 不改图片本身、不重新生成 —— 纯 CSS,随时可调。 ## 实测 线上 HTML 已确认含两条 `mask-image`(含 `-webkit-` 前缀)且不再有 `drop-shadow`; `hero.jpg` / `og-image.jpg` / `favicon.svg` / `logo.svg` 均 200 正常。
This commit is contained in:
parent
fe5eaa51c4
commit
a3b14e9cb8
@ -202,7 +202,12 @@ h1 .accent { color: var(--brand); }
|
|||||||
max-width: 100%; max-height: 100%;
|
max-width: 100%; max-height: 100%;
|
||||||
width: auto; height: auto;
|
width: auto; height: auto;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
filter: drop-shadow(0 26px 44px rgba(15,20,25,0.13));
|
/* 把图片的硬边框**融进页面白底**:径向遮罩让中心(柜体)保持不透明、四缘渐变透明。
|
||||||
|
否则 4:3 的图贴在白底上会有一道明显的"贴图"竖直硬边。
|
||||||
|
椭圆半径按柜体在画面里的占比取(柜体约占宽 50%、高 84%)⇒ 柜体完全在实心区内,
|
||||||
|
只有背景在边缘化开。图片自带地面投影,故移除 CSS 投影(否则影子会被遮罩切断)。 */
|
||||||
|
-webkit-mask-image: radial-gradient(ellipse 72% 86% at 50% 50%, #000 58%, transparent 92%);
|
||||||
|
mask-image: radial-gradient(ellipse 72% 86% at 50% 50%, #000 58%, transparent 92%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== BOT: 底部备案 ===== */
|
/* ===== BOT: 底部备案 ===== */
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user