Question

我正在尝试对css clip-path进行最简单的测试，阅读有关该主题的主要网站，并且我的本地没有任何作用。我已经在圈子里跑了一段时间，这真是令人气愤。即使从网上复制示例也不会产生任何结果。

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

我使用MacOs，我尝试使用最新版本的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>

css clip-path jpg图片

0 个答案: