使用CSS剪切圖像的所需部分

-1

所以基本上我有一個日落的圖像我想用作我的網頁的橫幅，但我只想使用它的一部分，而不是整個圖像。我想出瞭如何將圖像剪裁成我想要的尺寸;現在我只是想弄清楚如何重新定位圖像，以便我想要看到的圖像部分以我選擇的剪輯尺寸顯示。提前致謝。使用CSS剪切圖像的所需部分

<html> 
 

 
<head> 
 
    <style> 
 
    #banner { 
 
     position: absolute; 
 
     display: block; 
 
     margin-left: 15%; 
 
     clip: rect(8px, 960px, 200px, 0px); 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <img id="banner" src="http://weknowyourdreams.com/images/sunset/sunset-02.jpg"> 
 
    <h1>My Travels</h1> 
 
    </header> 
 
</body> 
 

 
</html>

來源

2015-11-05 Darryl Mendonez

'clip'已棄用。使用'clip-path'，你在裏面提到的尺寸就是圖像的座標。 –

您應該在圖像編輯器中剪裁圖像，除非您在不同分辨率下具有不同尺寸的剪輯。否則，它會浪費帶寬，加載時間等_網絡性能 – FelipeAls

應用限幅至在CSS元素是clip-path

例如：

.element { clip-path: inset(10px 20px 30px 40px); /* Also can take single values to make all sides the same, or 2 values (vert/horz), or 3 values (top/horz/bottom). */ }

Codepen實施例：here。

來源

2015-11-05 13:16:51 naqushab

使用CSS剪切圖像的所需部分

回答

相關問題