Question

我遇到垂直拉伸背景图像一直到底部的问题。我知道我可以在容器类height上设置min-height或.view-index，但不要手动设置高度属性，因为我希望图片能够响应用户调整浏览器大小时的浏览器大小。

虽然背景图片从底部延伸，但我不希望它覆盖第二张图片.view-extra img。

我想要实现的目标：https://mdbootstrap.com/live/_MDB/index/docs/page-layouts/intro-transparent.html

这是我的JSFiddle（已更新）

Answer 1

这样的东西？

if (Physics.Raycast(ray, out hit))
{
    if (hit.collider.gameObject == screen3D)
    {
        Debug.Log(hit.point);
    }
}

.view-index {
    background: url("https://mdbootstrap.com/img/Photos/Others/img (42).jpg") no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}

.view-text {
	color: white;
	margin: auto;
	text-align: center;
}

Answer 2

将高度设置为100vh将为您提供所需的信息。

.view-index {
  background: url("http://i.imgur.com/f6f5Xq7.jpg") no-repeat center center;
  background-size: cover;
  display: -webkit-flex;
  display: flex;
  height: 100vh;
}

.view-text {
  color: white;
  margin: auto;
  text-align: center;
}

<div class="container">
  <div class="view-index">
    <div class="view-text">
      <h2>This Navbar isn't fixed</h2>
      <h5>When you scroll down it will disappear</h5>
      <br>
      <p>Full page intro with background image will be always regardless of device </p>
    </div>
  </div>
  <div class="view-extra">
    <img src="http://i.imgur.com/0NCooNY.jpg">
  </div>
</div>

CSS3背景图像不会垂直拉伸

2 个答案: