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

2023年9月26日 198次阅读

我正在使用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>

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

谢谢.

最佳答案 在.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>
点赞