【CSS学习】--- 背景

时间 2019-11-19

标签 CSS学习背景栏目 CSS 繁體版

原文原文链接

1、前言

　　元素的背景区域包括：元素的内容、内边距和边框区域。css

　　CSS中用于设置背景的属性有：

background-color	设置背景颜色
background-image	设置背景图片
background-repeat	设置是否以及如何重复背景图像
background-position	设置背景图的开始位置
background-attachment	设置背景图像是否固定或者随着页面的其他部分滚动
background	简写属性，做用是将全部属性值写在一个声明中

　背景属性默认都不继承。下面咱们来逐步学习设置背景的各个属性。html

2、背景颜色：background-color

　　background-color 属性为元素设置一种纯色背景。浏览器

属性值：

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 100px;
            line-height: 100px;
            border: dashed 10px black;
            background-color: #FFCCCC;
        }
    </style>
</head>
<body>
    <div>虚线之间也填充了背景色！</div>
</body>
</html>

background-color

3、背景图片：background-image

　　 background-image 属性为元素设置背景图像。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。ide

　　建议同时设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可得到良好的视觉效果。学习

属性值：

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        .one{
            width: 200px;
            height: 100px;
            margin-bottom: 10px;
            line-height: 100px;
            background-image: url(http://h5ip.cn/ybPo);
        }        
        .two{
            width: 200px;
            height: 100px;
            line-height: 100px;
            background-image: url(随便了);
            background-color: #FFCCCC;
        }
    </style>
</head>
<body>
    <div class="one">背景是赵丽颖哦。</div>
    <div class="two">图没了，但还有背景色！</div>
</body>
</html>

background-image

4、背景重复：background-repeat

　　 background-repeat 属性设置是否及如何重复背景图像。默认地，背景图像在水平和垂直方向上重复。测试

属性值：

栗子：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            div{
                width: 200px; 
                height: 50px;
                background-image: url(images/background.jpg);
                margin-bottom: 20px;
                border: solid 1px black;
            }
            .no-repeat{background-repeat: no-repeat;}
            .repeat{background-repeat: repeat;}
            .repeat-x{background-repeat: repeat-x;}
            .repeat-y{background-repeat: repeat-y;}
        </style>
    </head>
    <body>
        <div class="no-repeat">
            不重复no-repeat
        </div>        
        <div class="repeat" ">
            重复repeat
        </div>       
        <div class="repeat-x">
            x上重复repeat-x
        </div>        
        <div class="repeat-y">
            y上重复repeat-y
        </div>
    </body>
<html>

test background-repeat

5、背景定位：background-position

　　background-position 属性设置背景图像的起始位置。这个属性设置背景原图像的位置，背景图像若是要重复，将从这一点开始。url

　　提示：1.您须要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工做。spa

　　　　　2.若是只设置background-position而不设置background-repeat，则背景图片仍是会填充整个元素。3d

属性值：

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        .one{
            width: 200px;
            height: 100px;
            margin-bottom: 10px;
            line-height: 100px;
            border: dashed 5px black;
            background-image: url(images/background.jpg);
            background-position: bottom right;
            background-repeat: no-repeat;
        }        
        .two{
            width: 200px;
            height: 100px;
            line-height: 100px;
            border: dashed 5px black;
            background-image: url(images/background.jpg);
            background-position: bottom right;
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    <div class="one">设置no-repeat</div>
    <div class="two">设置repeat-y</div>
</body>
</html>

background-position

咱们发现当位置为bottom right时（第一个图所示）,背景图并无填充边框区域，而设置repeat-y以后（第二个图所示），背景图只填充了上下边框区域。这是由于background-position的属性值都是相对边框而言的（不包含边框），但设置repeat属性后能够填充边框。

6、背景附加方式：background-attachment

　　 background-attachment 属性设置背景图像是否固定或者随着页面的其他部分滚动。code

属性值：

其中fixed只是相对于该元素固定，当整个元素上滑后，背景天然也就滑出了界面。您能够尝试设置了指定高度的元素，例以下面第一个代码test：

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .one{
            height: 700px;
            border: solid 1px black;
            background-image: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3272553420,1572414492&fm=27&gp=0.jpg);
            background-repeat: repeat-x;
            background-attachment: fixed;
        }        
        p{
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="one">
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>        
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>        
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
    </div>
</body>
</html>

test

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .one{
            background-image: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3272553420,1572414492&fm=27&gp=0.jpg);
            background-repeat: repeat-x;
            background-attachment: fixed;
        }        
        p{
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="one">
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>        
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>        
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
    </div>
</body>
</html>

fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .one{
            background-image: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3272553420,1572414492&fm=27&gp=0.jpg);
            background-repeat: repeat-x;
        }        
        p{
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="one">
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>        
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>        
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
        <p>试着往下滚动鼠标</p>
    </div>
</body>
</html>

默认scroll，滚动

建议复制上面两个代码，提交到W3School测试，点我传送！

7、快捷方式：background

　　background 简写属性在一个声明中设置全部的背景属性。能够设置以下属性：

background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image

若是不设置其中的某个值，也不会出问题，设置顺序也没有要求。

一般建议使用这个属性，而不是分别使用单个属性，由于这个属性在较老的浏览器中可以获得更好的支持，并且须要键入的字母也更少。

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        div{
            width: 225px;
            border: solid 1px black;
            background: gray url(images/background.jpg) top repeat-x fixed;
        }
        p{
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
</body>
</html>

background

没有彻底显示，建议复制上面代码，提交到W3School测试，点我传送！

8、最后

　　所学不深，若有不足请您留言指出，十分感谢！

1. CSS学习笔记11 CSS背景
2. CSS学习笔记-背景属性
3. 前端学习 -- Html&Css -- 背景
4. 学习背景
5. CSS(一) CSS背景
6. CSS的背景
7. CSS 背景
8. CSS背景
9. CSS Backgrounds（背景）
10. CSS学习知识整理（二）Css 背景
更多相关文章...
• ionic 背景层 - ionic 教程
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• Tomcat学习笔记（史上最全tomcat学习笔记）
• 适用于PHP初学者的学习线路和建议