在HTML5中屏蔽图像的最佳方法-Java 学习之路

我想知道在HTML 5中屏蔽图像的最佳方法是什么？

事实上，我想在一个画廊中显示圆形缩略图，而不用打扰我的客户准备圆形图片......

在我看来，我有两个选择：Canvas masking或old fashioned way

你有其他想法吗？最佳做法？

谢谢

3 回答

这是最适合我的方法：

创建一个你想要的蒙版形状的SVG .
编辑相应元素的css并指定掩码的SVG的URL

对于200px的圆圈，您的SVG可能如下所示：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="image-mask" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<circle cx="100" cy="100" r="100" stroke="black" stroke-width="0" fill="black" />
</svg>

你的CSS看起来像这样：

#image-mask {
    width: 200px;
    height: 200px;
    mask: url('/static/images/avatarmask.svg');
    -webkit-mask-image: url('/static/images/avatarmask.svg');
}

如果您想要更深入的内容，我发现本指南非常有用：http://collidercreative.com/how-to-create-css-image-masks-for-the-web-with-svgs/ .

回复于 2024-04-30T11:17:12+08:00

3
你可以用
- 老式的方式 - 在所需元素的顶部使用透明的png
- 图像的css3 border-radius 设置为其尺寸的一半（以便边框定义圆圈）
- css3 mask 和 mask-clip 属性（这是一个不错的演示：http://www.webkit.org/blog/181/css-masks/）
- 画布做掩蔽
- svg以图像为背景图案圈出
选择取决于目标浏览器和您想要投资的时间 .
对于完全跨浏览器的结果，我建议采用老式的方式，但如果你想要更多的形状（可能是动态的）或者不仅仅是图像蒙版，你可以试试svg或canvas .
回复于 2024-04-30T11:17:12+08:00

-circle {
        -webkit-border-radius: 61px;
        -moz-border-radius: 61px;
        border-radius: 61px;
        border:1px solid #aaaaaa;
        width:122px;
        height:122px;
   }

看到这个

检查这个http://jsfiddle.net/WQSLa/1/

EDIT

你也可以按照阿尔伯特的建议尝试这个http://jsfiddle.net/jalbertbowdenii/WQSLa/3

回复于 2024-04-30T11:17:12+08:00

在HTML5中屏蔽图像的最佳方法

3 回答

相关问题