在形狀中顯示圖像的最佳方式

Question

任何人都可以告訴我哪種顯示圖像的最佳方式是？

Answer 1

可以使用一個html5帆布：

http://jsfiddle.net/HDqE8/

而不HTML5一個替代方案是使用掩模圖像（在中間透明部分的圖像時，與你喜歡的形狀，其餘與背景顏色）。然後你只需要重疊2張圖片，並將第一張圖片放在最前面。圖像也可以是svg。

Answer 2

有多種方式做到這一點，你只需要評估各種程度的瀏覽器支持每個：

CSS面具做到這一點真的很好：

http://thenittygritty.co/css-masking

但我認爲他們可能會有最糟糕的瀏覽器支持。

我相信你也可以用SVG做遮罩，但SVG並不支持所有這一切，並且有一點學習曲線。

我可能會這樣做的方式將是一個hacky少用transform: rotate();

.image-shape { 
    height: 150px; 
    background: url(http://imagz.inspiredmagz.netdna-cdn.com/wp-content/uploads/2013/05/3D-Illustrations-by-JR-Schmidt-08.jpg); 
    position: relative; 
} 
.image-shape .point { 
    width: 50px; 
    height: 50px; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    position: absolute; 
    bottom: -25px; 
    right: -25px; 
    background: #777; 
    overflow: hidden; 
} 
.image-shape .point img { 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    position: absolute; 
    top: -275px; 
    left: -85px; 
} 

你在哪裏有與背景圖像組一個div，然後另一個DIV旋轉45度並定位，以形成在底部的「點」。在這裏面你放置圖像，將其旋轉45度並將其放置成與第一個div的背景圖像對齊。 （定位這是一個痛苦，因爲旋轉，但只要這不需要縮放，一旦你這樣做就很好走

通過設置overflow: hidden;的點來切斷圖像的其他部分。DIV，然後再圍繞這一切的主要div容器

看到這個搗鼓了HTML和CSS的其餘部分：

http://jsfiddle.net/BszC3/

，我會用這個方法的原因是因爲輪換得到了相對較好的支持，並且可以在IE中與其主人一起實現ary過濾器：

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */ 

缺點是這是一個公平的工作，似乎是一個徹頭徹尾的破解。

你最好的選擇仍然是像這樣削減你的圖像，而不是打擾任何瘋狂的CSS。