CSS: 一个背景色+两重径向渐变的实例
本帖最后由 马黑黑 于 2022-5-6 07:57 编辑 <br /><br /><style>.mama { width: 740px; margin: auto; }
.mama p { padding: 8px 0; }
.mama details { cursor: pointer; }
.bgBox {
margin: auto;
width: 400px;
height: 400px;
background: rgba(0,0,0,.15);
background-image: radial-gradient(closest-side,transparent 98%,rgba(0,0,0,0.3) 99%);
background-position: 0 0;
background-size: 80px 80px;
}
.bgAdd {
background-image: radial-gradient(closest-side,transparent 98%,rgba(0,0,0,0.3) 99%), radial-gradient(closest-side,transparent 98%,rgba(0,0,0,0.3) 99%);
background-position: 0 0, 40px 40px;
}
</style>
<div class="mama">
<p>先看以下一组CSS+HTML代码：</p>
<pre><span style="color: red;">.bgBox </span>{
<span style="color: blue;">margin</span>: auto;
<span style="color: blue;">width</span>: 400px;
<span style="color: blue;">height</span>: 400px;
<span style="color: blue;">background</span>: rgba(0,0,0,.15);
<span style="color: blue;">background-image</span>: radial-gradient(closest-side,transparent 98%,rgba(0,0,0,0.3) 99%);
<span style="color: blue;">background-position</span>: 0 0;
<span style="color: blue;">background-size</span>: 80px 80px;
}
</style>
<<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"bgBox"</span>><<span style="color: darkred">/div</span>>
</pre>
<p>这会是什么样子呢？</p>
<details>
<summary>效果</summary>
<div class="bgBox"></div>
</details>
<p>正如我们所看到的，“画布”里有25个圆。我们的画布是400*400的尺寸，径向渐变默认为椭圆的形状，但在宽高一致尺寸的场景下，椭圆变成了圆。渐变背景大小我们设置为80*80，所以画布里能安排的圆就是25个。径向渐变中，我们用透明色和有较高透明度的黑色按一定比例布局，形成了接近白色的圆。同时请注意背景的位置设定，background-position，其{xy}坐标都是0；还有背景大小，background-size，它也有大作用，如果没有background-size的宽高80*80的设定，画布中只出现一个大圆。</p>
<p>现在再看下面的效果：</p>
<details>
<summary>效果</summary>
<div class="bgBox bgAdd"></div>
</details>
<p>这是在前面的基础上再加入一组完全相同的径向渐变背景色，但两组径向渐变背景的位置设置的不一样。以下是改变后的代码：</p>
<pre><span style="color: red;">.bgBox </span>{
<span style="color: blue;">margin</span>: auto;
<span style="color: blue;">width</span>: 400px;
<span style="color: blue;">height</span>: 400px;
<span style="color: blue;">background</span>: rgba(0,0,0,.15);
<span style="color: blue;">background-image</span>:
radial-gradient(closest-side,transparent 98%,rgba(0,0,0,0.3) 99%),
radial-gradient(closest-side,transparent 98%,rgba(0,0,0,0.3) 99%);
<span style="color: blue;">background-position</span>: 0 0, 40px 40px;
<span style="color: blue;">background-size</span>: 80px 80px;
}
</pre>
<p>和之前的代码比较，很容易发现所添加的另一组径向渐变和前面一组是一模一样的，背景大小background-size也不变，背景位置background-position原先的即第一组渐变背景位置不变，{xy}依然是{0 0}，第二组{xy}坐标位置是{40px 40px}——这是形成最终效果的关键所在，位置为{0 0}和{ 40px 40px}相邻的两个圆相互遮挡又有重合部分，从而构成了美妙的图案。</p>
</div>
本帖最后由 马黑黑 于 2022-5-6 08:22 编辑 <br /><br /><p>尝试在本地测试一下这组代码：</p><p><br></p>
<pre>
<style>
<span style='color: red;'>.bgBox </span>{
<span style='color: blue;'>margin</span>: auto;
<span style='color: blue;'>width</span>: 400px;
<span style='color: blue;'>height</span>: 400px;
<span style='color: blue;'>background</span>: rgba(0,0,0,.15);
<span style='color: blue;'>background-image</span>:
radial-gradient(closest-side,transparent 98%,rgba(0,0,0,0.3) 99%),
radial-gradient(closest-side,transparent 98%,rgba(0,0,0,0.3) 99%);
<span style='color: blue;'>background-position</span>: 0 0, 200px 200px;
}
</style>
<<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"bgBox"</span>><<span style="color: darkred">/div</span>>
</pre>
<p>然后弄明白，第二组径向渐变背景 background-position 为什么要设置为 {200px 200px} ?</p>
上面的两组代码，第二组{xy}坐标位置是{40px 40px}，这个好像40无论变成什么数字，图形都不变呢。 马黑黑 发表于 2022-5-6 08:04
本帖最后由 马黑黑 于 2022-5-6 08:22 编辑 尝试在本地测试一下这组代码：
<style>
200是半径？不过这样设置若不设80 80 就是一个圆了。 红影 发表于 2022-5-6 10:08
上面的两组代码，第二组{xy}坐标位置是{40px 40px}，这个好像40无论变成什么数字，图形都不变呢。
不可能的，任何改变都会有明显的变化。整租代码预设在 80*80的范围内布置两个渐变，每一个渐变背景的位置设定变化都会体现出来。 红影 发表于 2022-5-6 11:01
200是半径？不过这样设置若不设80 80 就是一个圆了。
不设置background-size，默认就是100%呈现组合背景，目的就是能够体验两组渐变背景组合起来后的初始样子。{200px 200px}是第二组渐变x和y开始的地方（左上角xy坐标），把第二组颜色变成红色，可能有助于理解，注意要结合 closet-side 最近边 来理解。 马黑黑 发表于 2022-5-6 12:46
不可能的，任何改变都会有明显的变化。整租代码预设在 80*80的范围内布置两个渐变，每一个渐变背景的位置 ...
可能没在论坛试的缘故，我在本地试好像不变化的。刚发的一个帖子也怪，本地试的变色效果和论坛完全不同。 马黑黑 发表于 2022-5-6 12:56
不设置background-size，默认就是100%呈现组合背景，目的就是能够体验两组渐变背景组合起来后的初始样子 ...
嗯嗯，这个图图本身挺奇特，仅仅是透明度，就能区分同一个颜色呢。 红影 发表于 2022-5-6 22:17
嗯嗯，这个图图本身挺奇特，仅仅是透明度，就能区分同一个颜色呢。
是的吧 红影 发表于 2022-5-6 22:16
可能没在论坛试的缘故，我在本地试好像不变化的。刚发的一个帖子也怪，本地试的变色效果和论坛完全不同。
会有一些差异，要慢慢感觉、体会 马黑黑 发表于 2022-5-6 22:28
会有一些差异，要慢慢感觉、体会
是的，需要慢慢感觉，发到论坛时先试一下，不行就调整。 红影 发表于 2022-5-7 12:25
是的，需要慢慢感觉，发到论坛时先试一下，不行就调整。
就酱
页:
[1]