Question

在this page

上获得结果的最佳方式是什么？

换句话说;你怎么用css或javascript解决方案让图片看起来像这样？

谢谢，理查德

Answer 1

使用

创建具有透明背景的图像，如上面的链接网站

http://www.arnaudbeelen.be/wp-content/uploads/2012/03/voeux2012.jpg

Answer 2

仅限css（仅限webkit浏览器 - 如果可以在其他浏览器上使用，则需要深入研究，但我对此表示怀疑）：

http://jsfiddle.net/536S8/

<div class="image-thumbnail">
    <img src="myimage.jpg" alt="" />
</div>

.image-thumbnail {
    width:500px;
    height:250px;
    -webkit-mask-image: url('mymaskimage.png');
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:0 0;
}

另一种方法是在图像上设置遮罩层（需要额外的遮罩div - 遮罩图像必须与背景颜色相同）：

http://jsfiddle.net/PCfWa/

<div class="image-thumbnail">
    <div class="image-mask"></div>
    <img src="myimage.jpg" alt="" />
</div>

.image-thumbnail {
    position:relative;
    width:500px;
    height:250px;
    overflow:hidden;
}
.image-mask {
    position:absolute;
    width:500px;
    height:250px;        
    z-index:2;  
    background:url(mymask.png) no-repeat 0 0;
    }

Answer 3

您可以创建图像蒙版，其中一些区域填充背景颜色和透明可见区域，然后将其覆盖在原始图像上（使用绝对定位和z-index）。如果您有一些需要可选择/可点击的文本，请使用与掩码相同的技术将其置于掩码顶部的新元素中，但使用更大的z-index值。

倾斜的缩略图或图片

3 个答案: