认识CSS的background（三）
本帖最后由 马黑黑 于 2024-3-11 18:24 编辑 <br /><br /><style>.ma { font: normal 20px/24px sans-serif; }
.ma p { margin: 12px 0; }
.ma mark { background: lightblue; padding: 0 6px; }
#mybox { margin: 20px auto; padding: 16px; width: 600px; height: 300px; font-size: 20px; line-height: 30px; color: navy; box-sizing: border-box; overflow-y: auto; background: rgba(100,100,0,.5) url('https://638183.freep.cn/638183/small/bg-sm.png') scroll no-repeat 10px 10px / 84px 84px; }
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thin solid silver; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
.iMid { text-align: center; }
</style>
<div class="ma">
<p>上一讲，我们列出了 background-* 的绝大部分属性都是我们应该掌握的，本节我们就开始进一步认识它们，我们会先了解其中的一部分。下面的代码是我们即将演示的效果的元素背景部分：</p>
<div class='mum'>
<cl-cd data-idx="1">#mybox {</cl-cd>
<cl-cd data-idx="2"> <span class="tBlue">background-color:</span> rgba(100,100,0,.5);</cl-cd>
<cl-cd data-idx="3"> <span class="tBlue">background-image:</span> url(<span class="tMagenta">'./pic/bg-sm.png'</span>);</cl-cd>
<cl-cd data-idx="4"> <span class="tBlue">background-repeat:</span> no-repeat;</cl-cd>
<cl-cd data-idx="5"> <span class="tBlue">background-position:</span> 10px 10px;</cl-cd>
<cl-cd data-idx="6"> <span class="tBlue">background-size:</span> 84px 84px;</cl-cd>
<cl-cd data-idx="7"> <span class="tBlue">background-attachment:</span> scroll;</cl-cd>
<cl-cd data-idx="8">}</cl-cd>
</div>
<p>效果如下：</p>
<div id="mybox" title="点我随机生成汉字"></div>
<p class="iMid"><input id="attach" type="checkbox" value="uncheck"/> <label class='tRed' for="attach">设置 background-attachment 为 local</label></p>
<p>点击上面的盒子，会自动生成一千个随机汉字，盒子将出现垂直滚动条。试着翻滚滚动条，看看你认识多少个字——哦不，是看看发生了什么？对，文本翻滚，背景巍然不动。啥原因呢？看代码第7行，background-attachment 使用了 scroll 值配套 overflow 而形成的背景固定不动。如果想让背景图和文本内容一同翻滚，你可以选点效果演示下方的复选按钮感受一下。这里，需要特别注意的是，background-attachment 的默认值是 scroll，随翻滚内容翻滚，但是它是有前提的，元素的 overflow、overflow-x、overflow-y 等三个属性不能设置为 auto 和 scroll，也就是不能让滚动条出现，否则，scroll 的效果等价于 fixed 的效果，而且，这个时候，也就是元素有滚动条的时候，设置 fixed 往往不能出现背景图片，必须设置为 scroll 才行，background 属性值为 local 则不受 overflow 属性设置的影响。这个知识点w3c官网语焉不详，甚至不介绍 fixed 和 overflow 属性的关系，local 这个属性值最多也只是举个栗子，为什么这样原因不明。</p>
<p>下面请回头看看第6行代码，这是设置背景图片大小即 background-size 属性，示例使用的值为<mark>84px 84px</mark>。为什么要用两个值呢？其实，图片是 84*84 的尺寸，宽高一样，这种情形，用一个值也是可以的，它表示背景图片宽高都是以 84 px 呈现。示例所用的图形形状是圆形，你可以试一试 84px 100px 值，<span id="ellipse" class="tRed">点击这里</span> 再回头看看。</p>
<p>background-size 可以使用百分比表示其属性值，例如，50% 60%，当这样使用，表示背景图片以元素宽高尺寸为标准，取其宽度的一半、高度的60%呈现背景图片。你可以试试 <span id="percent" class="tRed">点这里以50% 60% 改变背景图片大小</span>。这里说明一下互动操作的一些情况：当你尝试使用百分比显示背景图片，再去点击示范例子下方的复选按钮，你会看到背景图片从横向椭圆变为竖向椭圆，或者反过来的变化，这是因为元素有没有文本的原因，当没有文本，元素的高度是CSS预设的尺寸，当有了一千个汉字，元素的高度会被撑开，而背景图片的百分比是依据元素的高度进行渲染的。</p>
<p>background-size 还可以使用关键字来设置其属性值，auto、cover 和 contain，auto 使用图片的原始尺寸，cover 和 contain 都可能会对图片进行缩放，cover 的缩放标准是图片完全覆盖元素背景，图片的一部分会被切割，图形呈现出来不会变形，contain 则完整呈现图片，但元素背景的部分区域可能是空白的，至于图片是否被切割或元素是否留有空白，一切依赖于图片尺寸和元素尺寸的比例关系。</p>
<p>接着请回头看看第5行代码，设置背景位置即 background-position 属性。可以使用像素等实体单位表示其属性值，也可以使用百分比，两者都使用元素的坐标系，即始终以元素的左边和上边为参照，不同的是，使用px等实体单位值时，如果其值刚好等于元素的宽高值，则什么也看不到，但用百分比时，比如100% 100%，图片的右边和下边刚好和元素的右边和下边对齐。有兴趣的朋友可以自己尝试。</p>
<p>background-position 属性也可以使用关键字表示其值，有 left、top、bottom、right 和 center，都是方向性的关键字。</p>
<p>一个非常重要的知识点是，background-position 的值最好成双成对赋值，单值赋值时，其中一个会使用缺省值。</p>
<p>再来看看第 4、3、2 行代码，background-repeat 属性设置图片是否重复，默认（缺省）重复，repeat，或单向重复，repeat-x、repeat-y。</p>
<p>background-image 用于设置背景图片，图片用CSS函数<mark>url('图片地址')</mark>给出图片地址，凡 img 标签能用的图片它都能用。要注意，论坛中图片地址要用小角单或双引号包裹起来，否则可能会被论坛的ubb解析从而无法正常显示背景图片；如果使用渐变背景做元素的背景图，则使用基于渐变的函数而不是 url() 函数，渐变背景有线性渐变（linear-gradient 和 repeating-linear-gradient）、径向渐变（radial-gradient 和 repeating-radial-gradient）以及角向渐变（conic-gradient，目前浏览器不支持 repeating-conic-gradient），举例如下：</p>
<div class='mum'>
<cl-cd data-idx="1"><span class="tBlue">background-image:</span> linear-gradient(red, green);</cl-cd>
<cl-cd data-idx="2"><span class="tBlue">background-image:</span> radial-gradient(circle, red, green);</cl-cd>
<cl-cd data-idx="3"><span class="tBlue">background-image:</span> conic-gradient(red, orange, yellow, green, blue);</cl-cd>
</div>
<p>background-color 用来设置元素单纯的背景色，它不受 background-* 这些属性的影响，是独立的存在。</p>
<p>最后，以上这些属性，其实都可以用简写 background 写出来，下面的代码，等价于本节开头对背景设置的多行代码：</p>
<div class='mum'>
<cl-cd data-idx="1"><span class="tBlue">background:</span> rgba(100,100,0,.5) url(<span class="tMagenta">'图片地址'</span>) scroll no-repeat 10px 10px / 84px 84px;</cl-cd>
<cl-cd data-idx="2"><span class="tGreen">//解释</span></cl-cd>
<cl-cd data-idx="3"><span class="tBlue">background:</span> 背景颜色 背景图片 是否固定 是否重复 图片位置 / 图片大小;</cl-cd>
</div>
<p>这一讲就讲到这。</p>
</div>
<script>
const mkCNchars= (count) => {
const start = parseInt('4e00', 16);
const end = parseInt('9fa5', 16);
let name = '';
for(let i = 0; i < count; i++) {
const cha = Math.floor(Math.random() * (end - start));
name += '\\u' + (start + cha).toString(16);
}
return eval(`'${name}'`);
};
mybox.onclick = () => mybox.innerText = mkCNchars(1000);
attach.onchange = () => mybox.style.backgroundAttachment = attach.checked ? 'local' : 'scroll';
ellipse.onclick = () => mybox.style.backgroundSize = '84px 100px';
percent.onclick = () => mybox.style.backgroundSize = '50% 60%';
</script>
非常详细的教程，清楚的很，小白喜欢。。{:4_173:} 南无月 发表于 2024-3-10 17:42
非常详细的教程，清楚的很，小白喜欢。。
{:4_190:} 黑黑现在字体大了一点，但小辣椒还是暂时不看了，虎妞就看字写字，眼睛又发了。。。。 小辣椒 发表于 2024-3-10 19:43
黑黑现在字体大了一点，但小辣椒还是暂时不看了，虎妞就看字写字，眼睛又发了。。。。
眼睛太重要了 “使用px等实体单位值时，如果其值刚好等于元素的宽高值，则什么也看不到”
这个还从来不知道呢。 这个帖子好，可以从中学到很多知识{:4_199:} 红影 发表于 2024-3-10 20:59
这个帖子好，可以从中学到很多知识
有些方面可能说的不清楚 马黑黑 发表于 2024-3-10 21:37
有些方面可能说的不清楚
很清楚啊，剩下的需要学员自己去理解和记忆了{:4_187:} 红影 发表于 2024-3-10 22:12
很清楚啊，剩下的需要学员自己去理解和记忆了
酱紫就好 试 点这里以50% 60% 改变背景图片大小。
点击红字真的图片发生变化。。。
开始没看到鼠标变化还以为点了没应。。{:4_173:}
这又是个黑科技 南无月 发表于 2024-3-11 18:18
试 点这里以50% 60% 改变背景图片大小。
点击红字真的图片发生变化。。。
开始没看到鼠标变化还以为点了 ...
这我说清楚的 马黑黑 发表于 2024-3-10 22:49
酱紫就好
这样的讲解特别好呢{:4_199:} 红影 发表于 2024-3-11 20:19
这样的讲解特别好呢
没讲错就好 马黑黑 发表于 2024-3-11 21:54
没讲错就好
十分需要这样的学习呢{:4_187:} 很鼓劲这个贴子，很贴心！{:4_191:} 小文 发表于 2024-3-12 10:33
很鼓劲这个贴子，很贴心！
{:4_191:} 红影 发表于 2024-3-11 23:53
十分需要这样的学习呢
做帖必备知识 马黑黑 发表于 2024-3-11 18:25
这我说清楚的
这个你说得超级清楚。。{:4_173:}所以就跟着去点啦 南无月 发表于 2024-3-12 17:58
这个你说得超级清楚。。所以就跟着去点啦
原来如彼
页:
[1]
2