第七章 背景样式和圆角样式

一,背景单例型样式

1.背景颜色

写法: background-color:red; 背景颜色

例图: 例1

2.背景图片

写法:background-image:url("引入相对路径/在线引入");
元素宽度大 背景图片小 他会平铺整个元素
如下图情况

例2

如果不想让上面图片出现这样子的情况该怎么办呢?下面看第三个知识点可以解决

3.背景平铺

写法: background-repeat:no-repeat; 背景图片不平铺
repeat-x水平平铺
repeat-y垂直平铺

例3

这样背景图片就不会重复,是图片原本的大小,那么问题来了,如果想让图片移动或居中该怎么办呢?看下面第四个知识点

4.背景位置

写法: background-position: 10px 10px;也可以用百分比和center
..............................................x轴....y轴
如下图写成center 看看位置会发生什么变化

例4

图片会上下左右成居中位置,也可以用px值和百分比随意改变图片位置

5.背景图片大小

写法:background-size:100px;也可以写成百分比(最重要的是下面的两个写法)
background-size:cover;背景图片覆盖整个元素
background-size:contain ;等比放大(碰到一个边会停止放大)

cover的样式
contain的样式
看上面的cover是覆盖整个元素放大,而contain是等比放大,这就是他们两个的区别

6.层级问题

内容> 边框> 背景图片>背景颜色

7复合样式写法

        background-image: url("../图片/hhh.gif");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;

复合样式写法  background:red url() no-repeat center/ cover

上面这两个写法所表达的样式是一模一样的,不过复合样式是不是代码量更少很多呢,建议使用复合样式去写代码

---

二,css3的一些知识点

background-origin:content-box 从主体内容开始
padding-box 从padding开始
border-box 从border开始

background-attachment:fixed; 背景图片不随元素滚动

overflow:hidden; 超出文本隐藏
auto; 超自动计算会出现滚动条
scroll 会出现滚动条

如何画一个圆

div{
        width: 200px;
        height: 200px;
        background-color: red;
       border-radius: 50%;(百分比超出50%就会变成圆)
    }

也可以这样设置个角圆弧度:

  border-radius 10px 20px 30px 40px;

                   左上   右上  右下  左下

如图50%会显示出这样子

i例5
现在这个一般用作图标等,使更加圆滑,美观,如图: 例6

---