网页背景设计技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/xiongwanfeng/article/details/74932946

一，在背景色和背景图片同时存在的情况下，会显示背景图片：

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

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

3：不光是网页body如此，页面里的div、表格有了背景图依然应该设置一个背景色（跟背景图颜色差不多，至少跟文字颜色明显不同）。
毕竟有时会出现背景图无法打开的情况，这种情况下如果文字是白色而背景色是默认的白色的话，文字就看不出了。
完成一个网页的制作之后，尝试把存放图片的文件夹改名让网页呈现无图状态，看看光文字是否可读。
针对css文件，也应该做一次同样的测试，看看css文件没有被调用的情况下的状态。千万别认为人人都是稳定、高速的上网。

4：由于网速或代码冗余而导致网站打开速度慢的时候，图片加载不出来即可先显示背景色。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css设置背景图片</title>
    <style type="text/css">
        /*给整个页面加上背景*/
        body{
            background-color: yellow;/*颜色当背景*/
            background-image: url(mypicture.jpg);/*引入图片当背景,使用 url(),房屋大地板砖小，故铺满*/
            /*background-repeat: repeat-x;*/
            /*只在水平方向上铺满图片*/
            background-repeat: no-repeat;
            /*图片不重复，仅显示一遍*/
            background-attachment: fixed;
            /*背景图片位置固定，不随滚动条的变化而变化*/
            background-position: center;
            /*控制背景图片的位置*/
        }
    </style>
</head>
<body>
    <!-- 添加多个滚动条测试 -->
    <!-- 背景图和背景色都设置，显示谁？
        有的网站既设置背景图，又设置背景色的缘由 -->
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
</body>
</html>