背景图像显示图像的特定部分

Question

我这里有一个image，我只想要一个特定的位置显示什么。但是我的不工作。我只希望在不裁剪原件的情况下查看手 image。提前致谢

预期结果

HTML

<div class="banner">
            <h1>できる限り<br>
                自然な形で育てた<br>
                こだわりの野菜です。</h1>
            <h4>生産者／川口太郎・川口久美子さん（安芸市）</h4>
</div>

CSS

.banner{
    background: url(../img/img1.png);
    background-size: 100%;
    padding: 32% 0 5% 6%;
    color: white;
    letter-spacing: 0.1em;
    border-radius: 1%;
}

Answer 1

使用CSS剪辑。您可以在页面上裁剪图像，而无需编辑原始图像源文件。

https://www.w3schools.com/cssref/pr_pos_clip.asp

Answer 2

background-size 和 background-position CSS 属性的组合。不要忘记您可以使背景大小值大于 100%。我会把它扔进去然后从那里微调：

.banner{
  background: url(../img/img1.png);
  // background-size takes height and width but shorthand is one value used for both
  background-size: 200%;
  // background-position options include center, cover, and more: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
  background-position: center center;
}

Answer 3

看到你期望的图像，我想你可以试试这个：

background-repeat: no-repeat;
background-size: cover;
background-position: top;

背景图像显示图像的特定部分

Background image display specific portion of the image

html

css

image

background-image