昨天我们发现在使用区块元素呈现图片时,无法显示完整的图片。我们的原图长这样:
结果却只显示了左上 小角:
会有这个结果,是因为图片本身是有自己的宽高的。图片的宽高未必都会和区块的宽高符合,像上面这张图片原本的尺寸比较大,所以上面那个 200 X 200 的区块,就只能显示出图片的左上角。因此,这时候,我们就必须决定背景图片和区块怎麽配合;这个配合的属性,叫作
不过,我们可以想像,使用 contain 的时候,既然图片尺寸和区块尺寸不合,又需要让图片完整显示,这时候就会出现图片并未盖满区块的状况。那麽,这个没被盖满的区块,就会是白边对吗?让我们来试试看加上 background-size: contain 看看吧!
<div style="background-image: url(https://i.imgur.com/4ndjo3V.png); height: 200px; width: 200px; background-size: contain;"></div>
结果还是和预期中不一样啊!
该死的浏览器会自动重复图片,把区块盖满了。这不是我们期待的结果,所以我们必须设定背景重复:
<div style="background-image: url(https://i.imgur.com/4ndjo3V.png); height: 200px; width: 200px; background-size: contain; background-repeat: no-repeat;"></div>
终於,出现的图片比较接近预期的状况了!
另外,既然使用 cover 的时候,图片自动覆盖满整个区块,就会有超出区块不被看见的图片部分。这时候,图片的位置就变得非常重要,因为这会决定图片那些地方被裁切掉。例如,上面这张图片改为 background-size: cover 後
<div style="background-image: url(https://i.imgur.com/4ndjo3V.png); height: 200px; width: 200px; background-size: cover;"></div>
,看起来的样子会是:
虽然不太明显,不过图片只显示出最左边的风景。
因此,我们必须设定背景位置:
让我们把上面那个区块,设定 background-position: center 看看
<div style="background-image: url(https://i.imgur.com/4ndjo3V.png); height: 200px; width: 200px; background-size: cover; background-position: center;"></div>
果然,我们看见的就是中心的风景罗!
接着,我们要介绍一个超级重要的属性,这个属性是每个标签都可以设定的。还记得昨天提到的元件推挤吗?p 标签对应的原件,自然会把其他元件往上下推挤出去,但是 strong 标签不会。因此,我们是否有个属性,决定元件的上下推挤方式呢?
当然有,不过这个属性的名称很奇怪,叫作
前面我们用了 4 个区块,来展现 position 的作用。这 4 个区块之所以会垂直排列,就是因为 div 预设 display: block。那麽,假使我们想把这 4 个区块横向排列,该怎麽办呢?没错,就是设定 display: inline-block 就可以罗:
<div>
<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px; display: inline-block;">区块一</div>
<div style="margin:2px; height:100px; width:100px; background-color:violet; color:white; text-align:center; line-height:100px; display: inline-block;">区块二</div>
<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px; display: inline-block;">区块三</div>
<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px; display: inline-block;">区块四</div>
</div>
我们就会得到:
最後,既然我们说过 CSS 样式千奇百怪,与其喂各位阿嬷吃鱼,不如教各位阿嬷怎麽钓鱼!
工程师们在遇见问题的时候怎麽办呢?上课?念书?太慢了吧!当然是 google 啊!不过,我们也是必须掌握查询相关知识的钥匙 (key),也就是关键字 (key word)!繁体中文资源最齐全的,应该就是铁人赛罗!因此,遇到任何想知道的技术,可以先搜寻那个技术的名称加上「铁人赛」。如果你阿嬷对於阅读比较抽象的文字还算擅长,也可以搜寻技术名称加上 "MDN",不过有些页面会是全英文喔!另外,W3Schools 这个网站上也有许多教学,部分也有简体中文化,也可以上去看看。最後,假使遇到问题比较细,并非某个技术,就可以查 StackOverflow 这个网站,上面说不定已经有人,问过我们遇到的问题罗!
那麽,今天就差不多把基础的 CSS 样式都走过一次,期待明天再见罗!
>>: 理解网际网路协定(三):何谓「子网路遮罩」,什麽又是「预设闸道」?
运算式(Expression):最大的特性是产生一个「值」。像是在呼叫 function 时的参数...
我们写的脚本不仅仅是自己使用,有时需要分享给别人使用。这种情况下,帮助信息可以更好地帮助使用者,使用...
之前介绍了几天关於架设Bot的服务器,那接下来我们用程序写Bot并放上云端服务器呢? 目前我选择了先...
谢谢看到这里的各位,若没有你们来看我的文章我可能早就弃赛了XD 其实我报名完後就後悔了,结果竟然没有...
前言 昨天讲了在产生 session ID 时有什麽应该要注意的地方,但除了 session 之外,...