如何设置背景图像的固定大小？

Question

如何设置背景图片的固定大小？

我现在设置宽度和高度，但是当我增加或减少浏览器窗口图像时，就会被阻塞。 Ifix怎么能？

当我减小窗口大小时，图像将被缓慢阻止：

这是我的代码：-

.bg{
  height: 600px;
  width: 100%;
  border-bottom-left-radius: 80%;
  border-bottom-right-radius: 80%;
  background-image: url("/assets/images/interview.jpg");
  background-size: cover;
  display: flex;
  justify-content: center;
}

Answer 1

几个新行。在上面添加了评论。

.bg{
  height: 600px;
  width: 100%;
  border-bottom-left-radius: 80%; /*I'd remove this and edit the original photo*/
  border-bottom-right-radius: 80%; /*I'd remove this and edit the original photo*/
  background-image: url("https://i.pinimg.com/originals/3b/8a/d2/3b8ad2c7b1be2caf24321c852103598a.jpg");
  background-size: contain; /*From cover to contain*/
  background-position: top !important; /*New - Can change to center*/
  background-repeat: no-repeat !important; /*New*/
  display: flex;
  justify-content: center;
}

<div class="bg">

</div>

Answer 2

您需要将bg组件的位置设置为fixed

您的新CSS类将如下所示：

.bg{
   height: 600px;
   width: 100%;
   border-bottom-left-radius: 80%;
   border-bottom-right-radius: 80%;
   background-image: url("/assets/images/interview.jpg");
   background-size: cover;
   display: flex;
   justify-content: center;
   //modifications
   background-repeat: no-repeat;
   position:'fixed';
   top:0;
   left:0;
 }