0

我正在尝试对 css 剪辑路径进行最简单的测试，阅读有关该内容的主要网站，但在我的本地没有任何效果。我已经在圈子里跑了一段时间，这真令人气愤。即使从网上复制示例也根本不会提供任何结果。

我只是想...用一个圆圈剪辑一个简单的 jpg 图像。我尝试使用定义剪辑路径和-webkit-clip-path的css，它不起作用：img完全显示而没有剪辑。我尝试使用 svg 剪辑路径，但它不起作用：img 完全显示而没有剪辑。

我使用 MacO，我尝试使用最新版本的 Chrome、Safari 和 Firefox。我使用（测试）Adobe Brackets 来编辑 html 和 css 文件。

我必须做错事，我必须。但我找不到什么。你能提供任何帮助吗？谢谢！

这是仅使用 css 的示例：

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Torche</title>
<link rel="stylesheet" href="/style.css" />
<style>

.testClip {
    -webkit-clip-path: circle(60 px at center);
    clip-path: circle(60 px at center);
    width: 100%;
}
</style>
</head>
<body>
  <div id="mainPage">
    <img src="/img/Japan.jpg" class="testClip">
  </div>
</body>
</html>

这是 SVG clipPath 的示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Torche</title>
<link rel="stylesheet" href="/style.css" />
<style>

.testClip {
    -webkit-clip-path: url(#testSvgClip);
    clip-path: url("testSvgClip);
    width: 100%;
}
</style>
</head>
<body>
<svg width="0" height="0">
    <defs>
        <clipPath id="testSvgClip">
            <circle cx="100" cy="100" r="25"></circle>
        </clipPath>
    </defs>
</svg>
<div id="mainPage">
    <img src="/img/Japan.jpg">
</div>
</body>
</html>
4

0 回答 0