CSS：背景大小：50% 覆盖 - 可能吗？

Question

这样的事情可能吗？

.background {
  background-size: 50% cover;
}

更新：
我希望你现在能更好地理解它。
图像应该保持比例，即使一部分应该消失。

 .background { border: 5px solid black; width: 100%; min-height: 400px; background-image: url('http://placehold.it/350x150'); background-repeat: no-repeat; background-position: top right; background-size: 50% 100%; }.text { padding: 10px; width: 48%; }.center { display: block; text-align: center; }

 <div class='background'> <div class='text'> <h1>Lorem ipsum</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <div class='center'> <a href='#'>Lorem ipsum</a> </div> </div>

干杯

Answer 1

不，你不能 ，

这是background-size属性的正式语法 ，

<bg-size> = [ <length-percentage> | auto ] {1,2} | cover | contain

这意味着只要您有cover ，就无法获得length-percentage （那些|表示OR）

---

相反，您可以使用background-size: 50% 100%或background-size: auto 100%

---

更新根据更新的问题，您可以使用flexbox实现flexbox

 div { display: flex } div div:last-of-type { background: url("http://lorempixel.com/400/200/") no-repeat center / cover; } div div { flex: 1 } 

 <div> <div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div> <div> </div> </div> 

Answer 2

您不能使用background-size: 50% cover可以background-size: 50% cover ，尽管可以background-size: 50% cover背景，这样背景可以占据宽度的50％和高度的100％。 我相信您正在寻找的是：

.background {
  background-size: 50% 100%;
}

我在这里制作了一个小提琴来演示这一点 。

希望这可以帮助！

Answer 3

您应该将此用于您的CSS背景：

.background {
  border: 5px solid black;
  width: 100%;
  min-height: 400px;
  background: url('http://placehold.it/350x150') no-repeat right; 
  background-size: 50% 100%;
}

Answer 4

通过创建一个宽度为 50% 的绝对内部 div 是可能的。 在宽度为 100% 的相关容器内。 可以给里面的div做一个覆盖效果，靠右对齐。