CSS 剪辑路径生成器对我不起作用

Question

如何将我的图片放在正确的位置？我直接通过网站从 CSS path maker 复制代码。但是我无法根据 HTML 中的实际图像调整图像大小。我可以知道修复图像需要什么代码或任何方法吗？

我的代码脚本

.巴西林格{ 背景图像：url("image/brazil.jpg"); 剪辑路径：多边形（20% 0%、80% 0%、100% 20%、100% 80%、80% 100%、20% 100%、0% 80%、0% 20%）；宽度：280px； height:280px; 边距顶部：400px；左边距：60px； }

[我的代码脚本][1]

[CSS 剪辑路径生成器][2]

My final outcome after entering the code

The original image that I want to create image clipping

Answer 1

您的 CSS 正在裁剪图像，但图像未在 div 中居中，因此您只能看到顶部。还有一个很大的顶部边距，这意味着您只看到顶部，如问题中的图片所示。这是整个剪辑图像 - 如您所见，只是顶部。

如果我们向 .brazilimg class 添加一些内容，告诉系统将图像置于 div 的中心，裁剪左右两侧以保持图像的纵横比，我们看到正确的图像。 background-size: cover; 是我们添加的。

这是一个片段，显示了图像居中之前的问题，但注释掉了较大的上边距，因此我们可以看到整个图像：

.brazilimg{
 background-image:url("https://i.stack.imgur.com/bUUz7.jpg");
 clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
 width: 280px;
 height:280px;
 /*margin-top:400px;*/
 margin-left:60px;
 }

<div class="brazilimg"></div>

这里是添加了封面以集中图像的片段：

.brazilimg{
 background-image:url("https://i.stack.imgur.com/bUUz7.jpg");
 clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
 width: 280px;
 height:280px;
 /*margin-top:400px;*/
 margin-left:60px;
  /* added to ensure the image is centrally located */
 /* and make this CSS class more general for different images' aspect ratios */
  background-size: cover;
 }

<div class="brazilimg"></div>

CSS 剪辑路径生成器对我不起作用

CSS Clip-Path Generator not working for me

css

clip-path