CSS学习笔记 11.背景

背景属性

background-color 设置背景颜色
background-image 设置背景图片

div{
    height: 300px;
    width: 400px;
    background-color: #bfa;/*背景颜色为绿色*/
    background-image: url(./picture/游戏/剑魔.png);/*指定图片路径*/
}
</style>

可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
如果背景的图片大于元素，将会一个部分背景无法完全显示
如果背景图片和元素一样太,则会直接正常显示

background-repeat 用来设置背景的重复方式（）
可选值:
repeat 默认值,背景会沿着x轴y轴双方向重复
repeat-x沿着x轴方向重复
repeat-y 沿着y轴方向重复
no-repeat 背景图片不重复

background-position 用来设置背景图片的位置
可选值: left right top bottom center(中间)

background-position: left top;/*表示左上*/

方位词应该写两个词
如果第一个写了 第二个没写 则第二个会默认为center
还可以用偏移量来设置图片位置
如

background-position:-100px -200px;

第一个值表示水平方向偏移量 第二个值表示垂直方向偏移量
表示以坐标原点为参照（左上角点） 图片向左移动100px 向上移动200px

background-origin 背景图片的偏移量计算的原点
padding-box默认值，background-position从内边距处开始计算
content-box背景图片的偏移量从内容区处计算
border-box背景图片的变量从边框处开始计算

background-clip 设置背景的范围
可选值:
border-box默认值，背景会出现在边框的下边
padding-box背景不会出现在边框,只出现在内容区和内边距
如图 边框里无背景
content-box背景只会出现在内容区

background-size设置背景图片的大小
第一个值表示宽度
第二个值表示高度
如果只写一个，则第二个值默认是 auto
background-size:cover 图片的比例不变，将元素铺满
background-size:contain 图片比例不变，将图片在元素中完整显示
background-size:100% 100%;表示为元素会填满背景 但比例会变

background-attachment 背景图片是否跟随元素移动 此属性用的少
可选值:
scroll默认值背景图片会跟随元素移动（有滚动条时）
fixed 背景会固定在页面中，不会随元素移动

backgound 背景相关的简写属性
所有背景相关的样式都可以通过该样式来设置并且该样式没有顺序要求，也没有哪个属性是必须写的
注意:
background-size必须写在background-position的后边，并且使用/隔开
background-position/background-size
background-origin background-clip两个样式，orgin要在clip的前边
如

 background: #bfa url(./picture/游戏/剑魔.png) center center/contain 
 border-box content-box;

bfa指背景颜色 url指定背景图片路径
center center指background-position属性 背景图片在中间
contain是background-size属性
第一个 border-box是background-origin 属性
第二个 content-box是background-clip属性

渐变

通过渐变可以设置一些复杂的背景颜色，
可以实现从一个颜色向其他颜色过渡的效果
渐变是图片,需要通过background-image来设置

1.线性渐变，颜色沿着一条直线发生变化
background-image:linear-gradient();
linear-gradient(red,yellow）红色在开头，黄色在结尾，中间是过渡区域-线性渐变的开头,我们可以指定一个渐变的方向
to left 向左渐变
to right
to bottom（默认情况）
to top
to right top（向右上渐变）
deg deg表示度数
turn表示圈

渐变可以同时指定多个颜色，多个颜色默认情况下平均分布
也可以在颜色后面加像素 手动指定渐变的分布情况

    <style>
            .box1{
width: 200px;
height: 200px;
background-image: linear-gradient( to left,red ,yellow ,#bfa);
            }
        </style>

2.径向渐变（放射渐变）
radial-gradient()径向渐变(放射性的效果)
默认情况下径向渐变的形状根据元素的形状来计算的
正方形–>圆形
长方形–>椭圆形
我们也可以手动指定径向渐变的大小
circle（圆形）
ellipse（椭圆形）
也可以指定渐变的位置
background-image: radial-gradient( 100px 100px at center center，red,yellow,green);表示圆心渐变为100px宽100高 在元素的中间位置

 .box1{
                width: 200px;
                height: 200px;
                background-image: radial-gradient(red,yellow,green);
            }