前置知识:CSS 渐变,5. 条纹背景,border-image,基本的 CSS 动画
前言
本文旨在实现图片边框效果,即在特定场景下让图片显示在边框而非背景区域。
一、传统实现方案
正常我们面对这样一个需求时,下意识会想到的就是,用图片做背景,再在上方覆盖内容区域,背景色为纯色。这样用两个元素就可以实现我们预期的效果。
<div class="something-meaningful"><div>I have a nice stone art border,don't I look pretty?</div>
</div>
.something-meaningful {background: url(https://img0.baidu.com/it/u=3535001583,268953038&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);background-size: cover;padding: 1em;
}.something-meaningful > div {background: white;padding: 1em;
}
这样就实现我们本篇的目标了,实现起来是相当简单了! 但有没有更合适的办法呢?比如尝试只用一个元素就实现这样的效果。
二、border-image
除了我们上述的方法,可能也有同学会想到 border-image 来实现图片边框,不妨直接试下。
/*** Basic border-image demo*/div {border: 40px solid transparent;border-image: 33.34% url('https://img0.baidu.com/it/u=3535001583,268953038&fm=253&fmt=auto&app=138&f=JPEG');padding: 1em;max-width: 20em;font: 130%/1.6 Baskerville, Palatino, serif;
}
通过图片我们可以发现,除了4个边角,每条边的填充都被拉伸了。
所以我们可以再考虑下 border-image 它的实现原理是什么样的
每个菱形的宽和高皆为 81 ÷ 3 = 27,所以我们将 border-image-slice 设置为 27,这样图像的角区域和边缘区域宽高皆为 27px。为了使每个菱形的中心恰好位于元素背景的边缘,我们将令 border-image-outset 等于 border-image-width 的一半。最后,将 border-image-repeat 设置为 round 使分割出的不同区域均匀贴合,没有裁剪或间隙。
div {border: 27px solid transparent;border-image: 33.34% url('https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image/border.png');padding: 1em;max-width: 20em;font: 130%/1.6 Baskerville, Palatino, serif;border-image-repeat: round;
}
所以 border-image 是将图片进行九宫格分割,然后填充在边框内。和我们本次的需求可以说没有太大的关系。
linear-gradient 方案
利用多重背景和 background-clip 实现单元素方案:
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white), url(stone-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;
实现原理
-
通过 background 设置多重背景:
-
底层为图片背景
上层用 linear-gradient 创建纯色背景 通过 background-clip 分别控制背景显示范围,实现边框背景效果。
小结
设置背景边框 就是通过正常的background 设置背景, 通过 linear-gradient 和 background-clip 的能力来将内容区域的背景描述出来;
这样,两个背景叠加就可以实现边框背景的效果。