使用CSS剪切图像的所需部分 [英] Clipping the required portion of the image using CSS
本文介绍了使用CSS剪切图像的所需部分的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以基本上我有一个日落的形象，我想用作我的网页的横幅，但我只是想使用它的一部分，而不是整个图像。我想出了如何将图像剪切到我想要的大小;现在我只是想弄清楚如何我可以重新定位的图像，使我想要看到的图像部分显示在我选择的剪辑大小。提前感谢。
So basically I have an image of a sunset I want to use as my banner for my webpage but I just want to use a portion of it, not the whole image. I figured out how to clip the image to the size I want; now I'm just trying to figure out how I can reposition the image so that the portion of the image I want to be seen is displayed in my chosen clip size. Thanks in advance.
<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>
推荐答案
在CSS中对元素应用剪切是 clip-path
Applying clipping to elements in CSS is 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例如：此处。
Codepen Example : here.
这篇关于使用CSS剪切图像的所需部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
