[Day 11] 阿嬷都看得懂的基础 CSS 样式-图片篇

阿嬷都看得懂的基础 CSS 样式-图片篇

昨天我们发现在使用区块元素呈现图片时,无法显示完整的图片。我们的原图长这样:

结果却只显示了左上 小角:

会有这个结果,是因为图片本身是有自己的宽高的。图片的宽高未必都会和区块的宽高符合,像上面这张图片原本的尺寸比较大,所以上面那个 200 X 200 的区块,就只能显示出图片的左上角。因此,这时候,我们就必须决定背景图片和区块怎麽配合;这个配合的属性,叫作

  • 背景尺寸:background-size。值可能是数字加上长度单位,但是我们比较常用的是两个文字,cover 表示让图片自动覆盖满整个区块contain 则是让整个图片在区块中完整显示

不过,我们可以想像,使用 contain 的时候,既然图片尺寸和区块尺寸不合,又需要让图片完整显示,这时候就会出现图片并未盖满区块的状况。那麽,这个没被盖满的区块,就会是白边对吗?让我们来试试看加上 background-size: contain 看看吧!

<div style="background-image: url(https://i.imgur.com/4ndjo3V.png); height: 200px; width: 200px; background-size: contain;"></div>

结果还是和预期中不一样啊!

该死的浏览器会自动重复图片,把区块盖满了。这不是我们期待的结果,所以我们必须设定背景重复:

  • 背景重复:background-repeat,可以指定重复的方式,例如水平重复 repeat-x 或垂直重复 repeat-y。不过很多时候,我们需要的是不重复 no-repeat
    那就让我们加上 background-repeat: no-repeat 看看吧!
<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,可以是数字加上长度单位,会把图片的左上边框放在距离区块左上边框那个长度的位置,当然也可以分开写定 2 个数值,就会分别对应左边框与上边框的距离。也可以在长度数值前面加上方位,指定该方位的边框距离。不过,比较常用的或许是 center 这个值,会把图片与区块的中心叠合在一起。

让我们把上面那个区块,设定 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 标签不会。因此,我们是否有个属性,决定元件的上下推挤方式呢?

当然有,不过这个属性的名称很奇怪,叫作

  • 展示样貌:display。值是文字,通常会用到的 4 种。分别是
    • block,会和其他元素产生上下推挤,可以设定宽高。div, p, h1 都是预设 display: block。
    • inline,不会和其他元素产生上下推挤,但是无法设定宽高。假使想设定高度,必须使用 line-height进行设定。例如前面我们用了 4 个区块,来展现 position 的作用,其中文字能够在区块中垂直置中,就是因为设定了 line-height 和区块的 height 相同。strong, span 都是预设 display: inline。
      那麽,假使我希望我的元素不会产生上下推挤,又可以设定宽高,该怎麽办呢?我们可以设定 display 的值为
    • inline-block,不会和其他元素产生上下推挤,又可以设定宽高。值得注意的是,img 标签是预设 display: inline-block,而非与 div 相同是 block 喔!

前面我们用了 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 样式都走过一次,期待明天再见罗!


<<:  【Day12】:NVIC中断概要

>>:  理解网际网路协定(三):何谓「子网路遮罩」,什麽又是「预设闸道」?

[Day05] 运算式与运算子

运算式(Expression):最大的特性是产生一个「值」。像是在呼叫 function 时的参数...

Powershell 入门添加参数帮助信息

我们写的脚本不仅仅是自己使用,有时需要分享给别人使用。这种情况下,帮助信息可以更好地帮助使用者,使用...

Day 06-Visual Studio 2019下载教学+初步建立chatbot专案

之前介绍了几天关於架设Bot的服务器,那接下来我们用程序写Bot并放上云端服务器呢? 目前我选择了先...

[Day30] 完结洒花❀ 看完赛心得顺便用Python画 3D 渐层花朵!

谢谢看到这里的各位,若没有你们来看我的文章我可能早就弃赛了XD 其实我报名完後就後悔了,结果竟然没有...

Day18-Session 管理(二)

前言 昨天讲了在产生 session ID 时有什麽应该要注意的地方,但除了 session 之外,...