结合背景尺寸百分比和背景尺寸覆盖

Question

在这里，我有一些大小各异的div，我正在将背景图像应用于它们：

div {
  border: solid 2px red; 
  background-image: url('https://www.360nobs.com/wp-content/uploads/2016/02/lady-gaga.jpg'); 
  background-size: cover; 
  background-repeat: no-repeat; 
  
  display: inline-block; 
  margin: 2em;   

}

.a {
  width: 100px; 
  height: 200px; 
}

.b {
  width: 200px; 
  height: 100px ; 
}

.c {
  width: 200px; 
  height: 200px; 
}

<div class ="a"> </div> 
<div class ="b"> </div> 
<div class ="c"> </div> 

现在，我只想在div的左半部分显示图像，但我希望它能覆盖整个高度。背景不应扭曲，而应缩放/拉伸。

一种方法是在其上添加位置：

div {
  border: solid 2px red; 
  background-image: url('https://www.360nobs.com/wp-content/uploads/2016/02/lady-gaga.jpg'); 
  background-size: cover; 
  background-repeat: no-repeat; 
  
  display: inline-block; 
  margin: 2em;   

 background-position: top right 50px; //Actually in my situation I would just use vw; 

}

.a {
  width: 100px; 
  height: 200px; 
}

.b {
  width: 200px; 
  height: 100px ; 
}

.c {
  width: 200px; 
  height: 200px; 
}

<div class ="a"> </div> 
<div class ="b"> </div> 
<div class ="c"> </div> 

但是问题是它仅显示图像的右侧，而在我的场景中，我希望它要么从左侧显示，要么从中心显示。

是否可以将剪辑应用于背景图像？我的替代解决方案是在顶部放置一个div以将其隐藏。

Answer 1

我会考虑将一个伪元素用作您的背景层：

man urandom

.box {
  border: solid 2px red;
  background-image: url('https://www.360nobs.com/wp-content/uploads/2016/02/lady-gaga.jpg');
  background-size: 0 0;
  display: inline-block;
  margin: 2em;
  position: relative;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:50%;
  bottom:0;
  background-image:inherit;
  background-size:cover;
}

.a {
  width: 100px;
  height: 200px;
}

.b {
  width: 200px;
  height: 100px;
}

.c {
  width: 200px;
  height: 200px;
}

Answer 2

您可以尝试将background-attachment:fixed;添加到背景中。希望它能起作用。