Question

我正在使用Angular并尝试将图像绑定到div背景。背景需要比原始图像更暗，以便以后可以包含文本：

问题是 - 图像在div的边界内没有正确显示;图像的某些部分缺失。

.PictureCover {
  background-size: cover;
    margin: 10px;
  width: 70px;
  height: 100px;
  float: left;
  
}

<div class="PictureCover" style="background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Entertainment/0/0/tom-cruise-playboy-interview-660.jpg);"></div>

示例中图像的网址是临时的，将被替换为绑定到角度中对象的图像，因此在PictureCover css类中包含“background-image”不是一个选项

感谢。

Answer 1

在.PictureCover中，您可以添加：背景位置：中心;

.PictureCover {
  background-size: cover;
    margin: 10px;
  width: 70px;
  height: 100px;
  float: left;
background-position: center center;
  
}

<div class="PictureCover" style="background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Entertainment/0/0/tom-cruise-playboy-interview-660.jpg);"></div>

无法正确地将图像放入div中

1 个答案: