html5整个桌面背景图片,HTML + CSS CSS设置背景图片后图片没有铺满屏幕

在15PB学习了一个星期的 HTML + CSS之后,发现还有一些东西需要去记忆,俗话说的好:

眼过千遍不如手过一遍,这就把需要记忆的东西记下来。

很多时候我们遇到的情况是:

设置背景图片background-image:url(xxx.jpg);

如果背景图片不平铺就达不到全屏的效果,如果平铺了之后效果就有些差强人意,这时候CSS这个属性就派上用场了

background-size: cover; //把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

这个属性有四个值:

值 | 描述

length --| 设置背景图像的高度和宽度,第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"

percentage --| 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。

cover --| 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain --| 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

还有一些属性和值是需要经常用但是不易记住的属性

letter-spacing //设置字符间距

text-decoration //文本的装饰 例如:下划线

text-shadow //文字阴影

text-indent //首行缩进

font-family //设置字体

font-style //斜体文本

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值