对渐变+图片背景的理解
渐变背景，不论是使用 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的（定义大小），也可以是图形的（大刀阔斧伺候）。 渐变同等于使用了图片，嗯嗯，记下了。
底图只能是小图啊，这个倒是没想到。 感谢黑黑分享的知识{:4_187:} 受教了，谢谢老黑。{:4_190:} 加林森 发表于 2022-4-5 17:59
受教了，谢谢老黑。
{:4_191:} 马黑黑 发表于 2022-4-5 18:23
{:4_190:}
页:
[1]