对渐变+图片背景的理解

马黑黑 · 发表于 2022-4-5 08:10

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

渐变背景，不论是使用 linear-gradient（线性）、radial-gradient（圆形）还是 conic-gradient（角向），它们都是以 image 属性呈现，亦即盒子理应是在选择器属性中的 background-image 项目中启用它们，虽然我们可以直接使用 background 的简写属性设定渐变。换言之，使用渐变做盒子的背景，同等于使用了图片。

不过，渐变背景被视为图片但操弄起来又不完全和图片一样，比如，我们无法像对图片那样简单定义它的位置、大小、是否重复&如何重复等等，它的渲染效果要占满整个盒子的平面，难以对之进行图片背景那样的控制。

不过，CSS3允许盒子存在多个背景图片共存，既然渐变也是 image，那么，盒子的背景元素里，以渐变为主角，再加上至少一张图片，这样的思路是可行的，只是，图片只能做配角，以小尺寸呈现，否则渐变就被盖住。

要想让图片与渐变一道同时显示在盒子背景中，还需要一个技巧：图片写在渐变的前面。试看：

.myDiv {
width: 760px;
height: 500px;
background: url('图片url') no-repeat center, conic-gradient(red, white, red);
}

<div class="myDiv"></div>

如果图片与渐变的位置颠倒过来，则图片不会得以显示。上例，所需图片应是小尺寸的，如是较大尺寸，需要加工，方法可以是CSS的（定义大小），也可以是图形的（大刀阔斧伺候）。