gpt4 book ai didi

html - 使用 CSS 裁剪图像的所需部分

转载 作者:行者123 更新时间:2023-11-28 16:08:43 25 4
gpt4 key购买 nike

所以基本上我有一张日落图像,我想用作我网页的横幅,但我只想使用它的一部分,而不是整个图像。我想出了如何将图像裁剪成我想要的大小;现在我只是想弄清楚如何重新定位图像,以便我希望看到的图像部分以我选择的剪辑大小显示。提前致谢。

<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

例如:

.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 .

关于html - 使用 CSS 裁剪图像的所需部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33545349/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com