javascript – `背景大小:封面`填补边框

前端之家收集整理的这篇文章主要介绍了javascript – `背景大小:封面`填补边框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有什么办法可以达到背景尺寸的效果:覆盖边框后面的区域也是如此.为了更好地说明这一点,请看下面的图像:左图是使用背景尺寸:封面并整齐地填满整个框本身,无论图像是纵向还是横向,但隐藏在半透明顶部和底部后面边界.第二个图像是使用background-size:auto 260px规则创建的,它可以提供我想要的效果,但是只有这样才有效,因为我知道这种情况下的背景是横向(并且框本身是200px,边框是30px).

用于渲染上述两个框的JSFiddle在这里可以是found.我很难相信纯css是不可能的,但即使是基于javascript的解决方案也是开放的(尽管我可以构建一个hackish Javascript解决方案,我不知道如何使看起来相对干净……).仍然希望有一种CSS方法来做到这一点.

解决方法

这可以通过将 background-origin属性设置为border-Box来实现:
#one{
    background-size:cover;
    background-origin: border-Box;
}

fiddle

还有一个background-clip属性,听起来应该这样做但是没有 – 因为默认情况下背景延伸到边框下,问题是为什么background-size:cover / contains /%不带边界考虑在内.我认为向后兼容性.

原文链接:https://www.f2er.com/js/156332.html

猜你在找的JavaScript相关文章