Css 两个背景图像，一个具有百分比大小，另一个覆盖了'；他走了？

我有一个div，我希望一半div被渐变覆盖，另一半是普通图像，但效果与

背景大小：cover相同

并让它填充渐变右侧的剩余空间。这可能吗

div{
宽度：100%；
高度：400px；
背景图片：url(http://placehold.it/100x100);
背景尺寸：50%覆盖；
背景位置：100%居中；
背景重复：无重复；
}
部门：以前{
内容：“；
显示：块；
宽度：50%；
身高：100%；
背景图像：线性渐变（红色、黄色）；
}

---

使用多背景和一些填充、背景原点技巧。其思想是将填充定义为宽度的一半，并将图像放在内容框上，内容框将是另一半

你必须使用<代码> vw <代码>单元，但是考虑滚动条的宽度有一个小缺点。如果div不是全宽div，那么它也可能是一个问题

.box{
左：50vw；
高度：300px；
背景：
线性梯度（红色、黄色）左/50vw 100%，
网址(http://placehold.it/400x400)中心/覆盖内容框；
背景重复：无重复；
}
身体{
保证金：0；
}