我在这里有一个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%;
}
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;
}
使用CSS剪辑。您可以在页面上裁剪图像,而无需编辑原始图像源文件。
看看你想要的图像,我想你可以试试这个:
background-repeat: no-repeat;
background-size: cover;
background-position: top;