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

是这样的可能吗？CSS：背景大小：50％覆盖率 - 可能吗？

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

UPDATE：
我希望你现在可以更好地理解它。
即使零件应该消失，图像仍应保持成比例。

.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>

干杯

来源

2017-01-19 xuniX

也可以查找：'背景尺寸：汽车100％;'保持的比例图片 –

不，你不能，

这里是formal syntax为background-size财产，

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

这意味着，只要你有cover你不能有length-percentage（那些|手段OR）

，而不是你可以使用background-size: 50% 100%或background-size: auto 100%

UPDATE基础的在你更新的问题上，你可以使用0来实现你想要的

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>

来源

2017-01-19 00:33:24 dippas

我的问题与50％100％ist图片看起来不是很漂亮的一些显示分辨率。 – xuniX

@xuniX我在我的回答中说过，你可以使用'auto 100％' – dippas

宽度应该固定，高度应该是动态的。 – xuniX

不能使用background-size: 50% cover本身，虽然使得背景占据宽度的50％和100％高度，你可以做到这一点。我相信你要找的是什么：

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

我创建了一个小提琴展示这种here。

希望这会有所帮助！

来源

2017-01-19 00:30:53

你应该用这个你的CSS背景：

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

来源

2017-01-19 18:44:44

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

回答

相关问题