【CSS学习笔记】背景图片

直接看代码：

background: blue;

/*页面背景为蓝色，很简单的代码*/
background-image:url(small.jpg);

/*页面背景是名字叫small.jpg的图片*/
background-repeat: no-repeat;

/*水平方向显示图片repeat-x 竖直方向显示图片repeat-y 不重复图片no-repeat*/
background-attachment: fixed;

/*在页面特别长有滚动条时，可以固定图片*/

相关知识点：

1.背景图与背景色，都设置，显示背景图。

2.为什么有的网站既设背景图又设背景色？

原因1：考虑到大屏下（如1920*1080或者更大）网站背景图不足以撑满整个显示区域，所以背景图以外的部分要显示背景色，并且背景图边缘部分必须处理妥当保证平滑过渡到背景色，不会有突兀的感觉。

原因2：不光是网页如此，页面里的div、表格有了背景图依然应该设置一个背景色（跟背景图颜色差不多，至少跟文字颜色明显不同）。毕竟有时会出现背景图无法打开的情况，这种情况下如果文字是白色而背景色是默认的白色的话，文字就看不出了。完成一个网页的制作之后，尝试把存放图片的文件夹改名让网页呈现无图状态，看看光文字是否可读。针对css文件，也应该做一次同样的测试，看看css文件没有被调用的情况下的状态。如果由于网速或代码冗余而导致网站打开速度慢的时候，图片加载不出来即可先显示背景色。

倘若你是一个以黑色为主调的网站，默认背景色是白色，那背景图未加载完成时不就先白一下了，导致感觉闪了一下，视觉不友好，根据网站的主色调定义一个背景色，利于减少视觉疲劳（一般是先定义背景色，再定义背景图片，色彩优先）

巴特西

【CSS学习笔记】背景图片

最新文章

热门文章