HTML&CSS :用 CSS 遮罩,让产品展示图 “高级感爆棚”

82 阅读2分钟

这段HTML和CSS代码实现了一个简单的网页布局,展示了两张图片,并通过CSS的mask属性为图片添加了特殊的遮罩效果。


大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建议先少量复制代码进行测试,若未能解决问题,私信回复源码两字,我会发送完整的压缩包给你。

演示效果

HTML&CSS


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注:前端Hardy</title>
    <style>
        img {
            --o: 20px;
            --b: 8px;
            mask:
                conic-gradient(#000 0 0) no-repeat 50%/ calc(100% - 2*(var(--o) + var(--b))) calc(100% - 2*(var(--o) + var(--b))),
                conic-gradient(from 90deg at var(--o) var(--o), #0000 25%, #000 0) 0 0/calc(100% - var(--o)) calc(100% - var(--o));
            width: 250px;
        }

        body {
            margin: 0;
            min-height: 100vh;
            display: grid;
            grid-auto-flow: column;
            place-content: center;
            gap: 50px;
            background: repeating-linear-gradient(135deg, #D9CEB2 0 20px, #E0E4CC 0 40px);
        }
    </style>
</head>

<body>
    <img src="https://picsum.photos/id/237/300/300">
    <img src="https://picsum.photos/id/1011/300/300" style="--o:30px;--b:5px;">
</body>

</html>

HTML 结构

  • 包含两个img元素,分别加载了两张图片。图片的URL指向了Picsum Photos服务,这是一个提供随机图片的API。
  • 第一张图片使用了默认的CSS变量值,第二张图片通过内联样式覆盖了部分CSS变量值(--o: 30px; --b: 5px;)。

CSS 样式

  • img样式:定义了两个CSS变量:
  • --o:用于控制遮罩的偏移量,默认值为20px。
  • --b:用于控制遮罩的边界宽度,默认值为8px。
  • 使用mask属性为图片添加了遮罩效果:
  • 第一个conic-gradient:创建了一个圆形的遮罩,位于图片的中心,大小为calc(100% - 2*(var(--o) + var(--b)))。
  • 第二个conic-gradient:创建了一个四分之一圆形的遮罩,位于图片的左上角,大小为calc(100% - var(--o))。
  • 设置图片的宽度为250px。
  • body样式:将页面内容排列为水平布局。使用place-content: center将内容水平和垂直居中。
  • 设置背景为重复的线性渐变,形成棋盘格样式。

各位互联网搭子,要是这篇文章成功引起了你的注意,别犹豫,关注、点赞、评论、分享走一波,让我们把这份默契延续下去,一起在知识的海洋里乘风破浪!