元素的背景图片

作者: 岁月悄然飞逝徒留回忆_54a5 | 来源:发表于2018-10-23 20:01 被阅读0次

4、背景图片
CSS&JS一些问题
CSS3学习笔记（二）
第5章 css与背景相关的样式background
背景
[CSS] background-position:x y;
background-size contain/cover区别
元素的背景图片
ios下背景图片不能fixed的bug
Web前端社交账号注册按钮

background-color
background-color属性用来为元素设置背景颜色。
需要指定一个颜色值，当指定了一个颜色以后，整个元素的可见区域都会使用这个颜色作为背景色。
如果不设置背景颜色，元素默认背景颜色为透明，实际上会显示父元素的背景颜色
background-image
background-image可以为元素指定背景图片。
和background-color类似，这不过这里使用的是一个图片作为背景。
需要一个url地址作为参数，url地址需要指向一个外部图片的路径
例如：
background-image: url(1.jpg)
background-repeat
background-repeat用于控制背景图片的重复方式4 。
如果只设置背景图片默认背景图片将会使用平铺的方式，可以通过该属性进行修改。
可选值：
repeat：默认值，图片左右上下平铺
no-repeat：只显示图片一次，不会平铺
repeat-x：沿x轴水平平铺一张图片
repeat-y：沿y轴水平平铺一张图片
background-position
background-position用来精确控制背景图片在元素中的位置。
可以通过三种方式来确定图片在水平方向和垂直方向的起点。
关键字：top right bottom left center
百分比
数值
background-attachment
background-attachment用来设置背景图片是否随页面滚动。
可选值：
scroll：随页面滚动
fixed：不随页面滚动
background
background是背景的简写属性，通过这个属性可以一次性设置多个样式，而且样式的顺序没有要求。
例如：
background: green url(1.jpg) no-repeat center center fixed;

作业购物车

  <!DOCTYPE html>
 <html lang="en">
<head>
       <meta charset="UTF-8">
       <title>xuebi</title>
       <style type="text/css">
        .p1{
               width: 500px;
              height: 300px;
              border:  solid 10px;
            margin: 0 auto;
              position: relative;
                      background-color:yellow;
        

            }
  

        .b{
              width: 47px;
              height: 34px;
              border:  solid 10px;
             position: absolute;
             left: 200px;
              bottom :120px;
        
        
    }
    .b1{
        display: block;
        width: 47px;
        height: 34px;
        line-height: 34px;
        
        background-image: url(image/1.png);
        background-repeat: no-repeat;
        background-position: -8px -339px;

    }
    .b1:hover{
        background-color: blue;
        
        background-position: -59px -339px;
    }
    .b1:active{
        background-color: pink;
        
        background-position: -118px -337px;
    }

</style>
</head>
<body>
 <div class="p1">

         <div class="b"><a href="#" class="b1"></a></div>
</div>
</body>
</html>

image.png