Question

我的页面顶部有一个标题，当前正在覆盖图像。该图像是 paralympian 运行的，我的网页是关于被截肢者为什么需要继续参加体育运动的原因。

我真的希望图像显示他的跑步和假腿但是当我插入图像时它只显示了他的上半部分。我想保持图像尺寸与整个页面的尺寸相同并且看起来不错但我基本上只需要图像向上移动而不改变尺寸。

.image1 {
  background: url(https://images.unsplash.com/photo-1474014465286-9887839a5971?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=76a7a6bde1dd9e68d64b55ea5d907991) no-repeat;
  position: relative;
  bottom: 20px;
  background-size: cover;
  height: 350px;
  padding-top: 20px;
}

<div class="image1">
  <h1 class="headline"> how sport can help those suffering from lower-limb amputations </h1>
</div>

Answer 1

我猜您要找的是background-position属性 - 请参阅下面的演示文稿，我将其放置在center：

.image1 {
  background: url(https://images.unsplash.com/photo-1474014465286-9887839a5971?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=76a7a6bde1dd9e68d64b55ea5d907991) no-repeat;
  position: relative;
  bottom: 20px;
  background-size: cover;
  height: 350px;
  padding-top: 20px;
  background-position:center;
}

<div class="image1">
  <h1 class="headline"> how sport can help those suffering from lower-limb amputations </h1>
</div>

请参阅此参考：w3-shcools

您也可以使用百分比/像素指定x和y位置 - 请参阅下面的演示：

.image1 {
  background: url(https://images.unsplash.com/photo-1474014465286-9887839a5971?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=76a7a6bde1dd9e68d64b55ea5d907991) no-repeat;
  position: relative;
  bottom: 20px;
  background-size: cover;
  height: 350px;
  padding-top: 20px;
  background-position: 25% 25%;
}

<div class="image1">
  <h1 class="headline"> how sport can help those suffering from lower-limb amputations </h1>
</div>

Answer 2

我在这里看到3个选项：

简单的一个：使用css bg position属性，例如 background-position-y: bottom;
将这个div与height: 100%;放在另一个div中与width: 100%;具有相同的图像并应用模糊（因此您的图像将具有完整的高度，其余的空间将覆盖相同的缩放和模糊图像）。您可以使用此参考模糊 http://thenewcode.com/534/Cross-browser-Image-Blur-with-CSS
使用标题的宽高比来维持图像比例 - 这里是＃这个参考 https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/

如何在不改变所述图像尺寸的情况下显示图像的某个方面？

2 个答案: