我有以下 CSS 可以将图像制作成圆形，但是否可以将它们制作成星形或方形？
/* Effect 12: circle */
.cl-effect-12 a::before,
.cl-effect-12 a::after {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border: 2px solid rgba(0,0,0,0.1);
border-radius: 50%;
content: '';
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
transform: translateX(-50%) translateY(-50%) scale(0.2);
}
最佳答案
对于“它使我的图像呈圆形”，我假设您的意思是它显示了图像的圆形“切口”。考虑到这一点，我认为你想要的是 CSS Masking .以下所有内容均取自该来源，但在链接失效的情况下在答案中提供。
CSS masks were added to the WebKit engine by Apple quite a while ago, namely back in April 2008. Masks offer the ability to control the opacity/transparency of elements on a per-pixel basis, similar to how the alpha/transparency-channel of "24-bit"-PNGs or 32-bit-TIFFs work.
模拟一个简单的 -webkit-mask-image 跨浏览器
假设我们要将 HTML 元素屏蔽为鼠 header 的形状，如右图所示。
使用 WebKit 专有的 CSS 掩码，我们将得到这样的 HTML:
<div class="element">
<p>Lorem ipsum dolor sit … amet.</p>
</div>
并定义以下 CSS:
.element {
width: 400px;
height: 300px;
overflow: hidden;
color: #fff;
background: url(background.png);
-webkit-mask-image: url(mouse.png);
}
现代浏览器
[...] 下一步是在我们的内联 SVG 中定义一个 SVG 掩码，我们可以提供一个掩码图像，然后通过 style="mask:[mask id]"将其应用到我们的 foreignObject/embedded HTML :
<!DOCTYPE html>
<html>
<body>
<!-- SVG begins -->
<svg>
<!-- Definition of a mask begins -->
<defs>
<mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<image width="400px" height="300px" xlink:href="mouse.png"></image>
</mask>
</defs>
<!-- Definition of a mask ends -->
<foreignObject width="400px" height="300px" style="mask: url(#mask);">
<!-- HTML begins -->
<div class="element">
<p>Lorem ipsum dolor sit … amet.</p>
</div>
<!-- HTML ends -->
</foreignObject>
</svg>
<!-- SVG ends -->
</body>
</html>
最后我们需要一个合适的蒙版图像。我们不能简单地使用来自 WebKit 专有 CSS 掩码的图像，因为 SVG 掩码不查看透明度值，而是查看亮度值。所以我们需要做的是将所有不透明的图像像素变成白色阴影。
在 Photoshop 中这非常简单:
- 打开要用作蒙版的透明 24 位 PNG
- 选择“图层”菜单，然后选择“图层样式”，最后选择“颜色叠加”
- 在“颜色叠加”对话框中将颜色更改为白色
- 点击“确定”关闭对话框
- 选择"file"菜单、“保存为 web”，然后替换旧文件。
还有咔嚓! HTML 内容的屏蔽已在 WebKit、Firefox 和 Opera 中启动并运行!不错。
然后将为它下面的任何元素创建一个掩码:
关于html - CSS-如何将图像形状从圆形更改为方形或星形？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22227157/