有没有办法使用 CSS 来让仅图像的特定部分显示为 div 背景?基本上就像裁剪?
这张来自 adobe 的图片几乎概括了我的意思以及我希望我能用 div 做什么:
我想使用网络上的图像作为特定尺寸的 div 的背景图像(例如横幅)。然而,大多数谷歌搜索都会带我去
有什么方法可以做到这一点?我习惯于使用大多数图像编辑界面(adobe、大多数社交媒体图像编辑工具)轻松完成此操作,但我发现使用 CSS 很难做到这一点。大多数谷歌搜索都会让我看到像object-position、background-size或object-fit这样的东西,但所有这些都假设你想要整个图像。如果有一种方法可以让您的 div 容器中看到部分图像,我会很高兴。
background-position
。通过定义 div 的 width
和 height
,您可以定义裁剪区域的大小/尺寸。然后使用 background-position
属性,您可以移动该裁剪区域。
这是一个例子:
.cropped {
width: 128px;
height: 128px;
background-position: 0 100%;
background-image: url("https://source.unsplash.com/512x256?city");
position: absolute;
bottom: 0;
}
.full {
background: linear-gradient(
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.5)
),
url("https://source.unsplash.com/512x256?city");
width: 512px;
height: 256px;
position: relative;
}
<div class="full">
<div class="cropped"></div>
</div>