问题
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>回答1:
Applying clipping to elements in CSS is clip-path
For example:
.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 Example : here.
来源：https://stackoverflow.com/questions/33545349/clipping-the-required-portion-of-the-image-using-css