Question

我有跟随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);
}

Answer 1

“它使我的图像变成圆形”我认为你的意思是它显示了图像的圆形“切出”。考虑到这一点，我认为你想要的是CSS Masking。所有这些都是从该来源获取的，但在链接腐烂的情况下在答案中提供。

很久以前，Apple已经在WebKit引擎中添加了CSS掩码，即早在2008年4月。面具提供控制能力每个像素的元素的不透明度/透明度，类似于如何 “24位”-PNG或32位TIFF的alpha /透明通道可以正常工作。

模拟简单的-webkit-mask-image跨浏览器

因此，假设我们想要将HTML元素屏蔽为鼠标头部的形状，如右图所示。

使用 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-mask，我们可以提供一个掩码图像，然后通过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
选择“图层”菜单，然后选择“图层样式”，最后选择“颜色叠加”
在“颜色叠加”对话框中，将颜色更改为白色
单击“确定”
选择“文件”菜单，“保存为Web”，然后替换旧文件。

和KABOOOM！屏蔽HTML内容已在WebKit，Firefox和Opera中运行！好的。

White mouse mask

然后为其下的任何元素创建一个掩码：

Mouse masked element

Answer 2

如果您移除border-radius: 50%，那么它们将是正方形

CSS-如何将图像形状从圆形变为方形或星形？

2 个答案:

模拟简单的-webkit-mask-image跨浏览器

现代浏览器