如何在css中切片圖像

我想使用CSS在我的html文檔中切片圖像。如何在css中切片圖像

這是我想如何切片圖像。我已經用紅色掩蓋它：

enter image description here

<div class="img_section" > 
 
    <img src="http://i62.tinypic.com/1zbcqhg.jpg" alt="sliced-image" > 
 
</div>

我不想使用遮罩層可以隱藏圖像，因爲文件的背景是不是純色。我用border-radius屬性來做，但我做不到。如果CSS不可能，那麼js也不可能？

來源

2015-07-20 saeed

有一個在CSS沒有這樣的方式來切這隻能在LESS和上海社會科學院完成的圖像，但您可以使用多個圖像作爲一個精靈（單個圖像的多個圖標）

Check this out

來源

2015-07-20 06:01:02

我m不確定，但我認爲你可能正在尋找clip-path：https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

但是，瀏覽器的支持是相當零散的（截至2015年7月）。 http://caniuse.com/#search=clip-path

來源

2015-07-20 06:05:37 kieranpotts

你可以用CSS layer max來做到這一點，我寫了一個例子來創建你想要的東西，用黑色蒙版覆蓋。

HTML代碼：

<div class="img_section" > 
    <img src="http://i62.tinypic.com/1zbcqhg.jpg" alt="sliced-image" > 
    <div class="image-arrow"></div> 
</div>

CSS：

.img_section{ 
    width:445; 
    height:257px; 
    position:absolute; 
} 
.image-arrow{ 
    width: 0; 
    height: 0; 
    border-bottom: 257px solid black; 
    border-left: 130px solid transparent; 
    position:absolute; 
    right: 0; 
    bottom: 0; 
}

來源

2015-07-20 06:08:12 ibrahim

你可以做到這一點使用svg的clipPath剪輯圖像和foreignObject內svg導入HTML，因爲你只能申請svgclipPath到svg元素。

<svg width="445" height="257"> 
 
    <clipPath id="clip"> 
 
    <path d="M0,0 h444 l-130,257 h-314z" /> 
 
    </clipPath> 
 
    <foreignObject clip-path="url(#clip)" width="445" height="257"> 
 
    <div class="img_section"> 
 
     <img src="http://i62.tinypic.com/1zbcqhg.jpg" alt="sliced-image" /> 
 
    </div> 
 
    </foreignObject> 
 
</svg>

來源

2015-07-20 06:24:22

http://caniuse.com/#search=clip-path –

@AdrianEnriquez - ''svg'有clipPath'更好的瀏覽器兼容性。 –

抱歉@ chipChocolate.py我認爲這是一樣的。 –

如何在css中切片圖像

回答

相關問題