认识CSS的background（一）
本帖最后由 马黑黑 于 2024-3-8 20:44 编辑 <br /><br /><style>.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: thick groove lightblue; 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; }
#mydiv {
width: 600px;
height: 338px;
border: 1px solid red;
background: url('https://638183.freep.cn/638183/t24/jpg/dysonstar.jpg');
}
</style>
<p>在CSS中设置元素背景，需要至少五个基于 background 的属性，分别是背景颜色（background-color）、背景图片（background-image）、背景重复与否（background-repeat）、背景尺寸（background-size）、背景位置（background-position），后四个属性都是基于背景图片，意思是，后三个属性都是作用于第二个即背景图片、对背景颜色（background-color）没有影响。<br><br></p>
<p>以下代码，基于元素的背景，仅设置了背景图片，这意味着其他属性都是用默认值。为了美观，元素的 width 和 height 必须和图片的实际尺寸一致，同时，为了便于观察，元素设置了1像素的红色实线边框。然后，通过JS的 window.getComputedStyle(element) 来获取元素的五个基于 background 的属性值——默认和缺省值。通过比较、分析源码和JS获取的属性情况，可以大致了解元素的 background 设置。<br><br></p>
<p>代码：<br><br></p>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2">#mydiv {</cl-cd>
<cl-cd data-idx="3"> <span class="tBlue">width:</span> 600px;</cl-cd>
<cl-cd data-idx="4"> <span class="tBlue">height:</span> 338px;</cl-cd>
<cl-cd data-idx="5"> <span class="tBlue">border:</span> 1px solid red;</cl-cd>
<cl-cd data-idx="6"> <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/jpg/dysonstar.jpg'</span>);</cl-cd>
<cl-cd data-idx="7">}</cl-cd>
<cl-cd data-idx="8"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="9"> </cl-cd>
<cl-cd data-idx="10"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"mydiv"</span>><<span class="tDarkRed">/div</span>></cl-cd>
</div>
<p><br>效果：<br><br></p>
<div id="mydiv"></div>
<p><br></p>
<pre id="bgMsg"></pre>
<script>
(function() {
let showBgMsg = (ele) => {
let bg = window.getComputedStyle(ele);
return `
background-color: ${bg.backgroundColor};
background-iamge: ${bg.backgroundImage};
background-repeat: ${bg.backgroundRepeat};
background-size: ${bg.backgroundSize};
background-positiion: ${bg.backgroundPosition};
`;
}
bgMsg.innerText = 'JS获取的background属性详情：\n' + showBgMsg(mydiv);
})();
</script>
从背景图片属性开讲。。。好课程。。 南无月 发表于 2024-3-8 21:04
从背景图片属性开讲。。。好课程。。
这里面学问还挺多的，资深前端程序员都不敢说自己能完全掌握 这个好，通过js的获取值，可以知道默认的都是什么内容了{:4_199:} 红影 发表于 2024-3-8 22:10
这个好，通过js的获取值，可以知道默认的都是什么内容了
你懂用F12，一切一目了然 马黑黑 发表于 2024-3-8 23:19
你懂用F12，一切一目了然
我对那个一直用不来啊{:4_173:} 红影 发表于 2024-3-9 11:52
我对那个一直用不来啊
按个F12都不会
马黑黑 发表于 2024-3-8 21:47
这里面学问还挺多的，资深前端程序员都不敢说自己能完全掌握
{:4_170:}所以小白默默的，就跟着老师好好学呀。 南无月 发表于 2024-3-9 17:03
所以小白默默的，就跟着老师好好学呀。
我也只讲我懂的，我不懂的我不懂讲 马黑黑 发表于 2024-3-9 12:07
按个F12都不会
按完看到的都不认识，仿佛闯入了异世界啊{:4_173:} 红影 发表于 2024-3-9 21:40
按完看到的都不认识，仿佛闯入了异世界啊
来来去去就是26个字母和数字 马黑黑 发表于 2024-3-9 21:41
来来去去就是26个字母和数字
组合起来变化无穷{:4_173:} 红影 发表于 2024-3-9 23:23
组合起来变化无穷
比汉字容易一点吧 马黑黑 发表于 2024-3-9 23:41
比汉字容易一点吧
比汉字难多了，毕竟汉字我们是天然学会的{:4_173:} 红影 发表于 2024-3-10 09:56
比汉字难多了，毕竟汉字我们是天然学会的
据说汉字是世界上最难学的文字，所以中国人厉害 马黑黑 发表于 2024-3-10 09:57
据说汉字是世界上最难学的文字，所以中国人厉害
而且这份厉害是天然的{:4_173:} 红影 发表于 2024-3-10 10:55
而且这份厉害是天然的
就是呀 马黑黑 发表于 2024-3-9 18:36
我也只讲我懂的，我不懂的我不懂讲
对小白来说老师懂得太多太多。。。深不可测。。{:4_199:}
马黑黑 发表于 2024-3-9 18:36
我也只讲我懂的，我不懂的我不懂讲
老师你只管讲，需要擦黑板拿粉笔打杂的我来{:4_170:} 南无月 发表于 2024-3-10 17:18
老师你只管讲，需要擦黑板拿粉笔打杂的我来
现在谁还用黑板，李什么乐老师都改用电子黑板了