Question

我有一个div，其中有一个带有object-fit：cover的图像，该图像恰好适合我的需要，但无法在其上放置文本。如果我将它作为div bakcground放进去，它的大小不会相同。无论如何，是否将其作为背景放置在div中，但仍使用object-fit：cover。非常感谢

我正在使用以下内容：

.main {
      -webkit-filter: blur(0.2px);
      -moz-filter: blur(0.2px);
      -o-filter: blur(0.2px);
      -ms-filter: blur(0.2px);
      filter: blur(0.2px);
      border:0;
      padding:0;
        width:100%;
        height:560px;
        object-fit:cover;
    }

<div class="container-fluid main" style="margin-top: 0px;">
    <img src="https://images.pexels.com/photos/1213997/pexels-photo-1213997.jpeg" class="main" alt="mainbg" width="400" height="320">
    <div class="main-text">text here</div>
    </div>
    
    </div>

Answer 1

.main {
  -webkit-filter: blur(0.2px);
  -moz-filter: blur(0.2px);
  -o-filter: blur(0.2px);
  -ms-filter: blur(0.2px);
  filter: blur(0.2px);
  border:0;
  padding:0;
    width:100%;
    height:560px;
    object-fit:cover;
}
.main-text{
position:absolute;
top:50px;
left:150px;}

With the HTML :

<div class="container-fluid main" style="margin-top: 0px;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRL9rsCJmYG8L6mb5mN_geyDWtUNhKw0AIG6lJ3p7YGg7SxyHWb" class="main" alt="mainbg" width="400" height="320">
<div class="main-text">text here text heretext heretext here</div>
</div>

</div>

Answer 2

您可以将图像设置为背景图像。结合其他规则，您将拥有期望的结果。

  background-image: url(https://images.pexels.com/photos/1213997/pexels-photo-1213997.jpeg);
  background-size: cover;
  background-repeat: no-repeat;

希望这会有所帮助：>

.main {
  -webkit-filter: blur(0.2px);
  -moz-filter: blur(0.2px);
  -o-filter: blur(0.2px);
  -ms-filter: blur(0.2px);
  filter: blur(0.2px);
  border: 0;
  padding: 0;
  width: 100%;
  height: 560px;
  background-image: url(https://images.pexels.com/photos/1213997/pexels-photo-1213997.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
}

.main-text {
  color: white;
}

<div class="container-fluid main" style="margin-top: 0px;">
  <div class="main-text">text here</div>
</div>

Answer 3

我尚未更改object-fit属性。我刚刚将.main-text更改为位于图片上方。这是您所期望的吗？

.main {
      -webkit-filter: blur(0.2px);
      -moz-filter: blur(0.2px);
      -o-filter: blur(0.2px);
      -ms-filter: blur(0.2px);
      filter: blur(0.2px);
      border:0;
      padding:0;
        width:100%;
        height:560px;
        object-fit:cover;
    }
.main-text{
position:absolute;
top:50%;
left:50%;
color:white;
}

<div class="container-fluid main" style="margin-top: 0px;">
    <img src="https://images.pexels.com/photos/1213997/pexels-photo-1213997.jpeg" class="main" alt="mainbg" width="400" height="320">
    <div class="main-text">text here</div>
    </div>
    
    </div>

Answer 4

如果您只是想使文本位于图像顶部的中心，则可以尝试以下文本的绝对位置

.main {
      -webkit-filter: blur(0.2px);
      -moz-filter: blur(0.2px);
      -o-filter: blur(0.2px);
      -ms-filter: blur(0.2px);
      filter: blur(0.2px);
      border:0;
      padding:0;
      width:100%;
      height:560px;
      object-fit:cover;
      position: relative;
    }
    .main-text {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    color: white;
    font-size: 3rem;
    }

<div class="container-fluid main" style="margin-top: 0px;">
    <img src="https://images.pexels.com/photos/1213997/pexels-photo-1213997.jpeg" class="main" alt="mainbg" width="400" height="320">
    <div class="main-text">text here</div>
    </div>
    
    </div>

使用object-fit：cover将图片放在div中

4 个答案: