background综合属性

    <style type="text/css" media="screen">
     div{
         width:100px;
         height:50px;
         border:1px solid black;
         margin-bottom:10px;
     }    
     .box1{
         background-color:red;
     }
     .box2{
         background-color:rgb(255.0.0);
     } /*rgb表示三原色 "红"red "绿" green "蓝" blue。取值是0~255 三色都是0就是黑色
      三色 三色都是255是白色  红+绿=黄*/
      .box3{
          background-color:#ff0000;
      } /*所有用#开头的值，都是16进制的。所以16进制中,ff就是255.*/
      /*关于16进制 16进制就是16进一：0~9 a~f。
      转换成十进制就是十位数*16+个位数字=十进制*/

      /*background-image属性:*/
      .box4{
         background-image:url(image/xxx.jpg);
     } /*用于给盒子加上背景图片 url()表示网址
      uniform resouces locator 统一资源定位符*/
      /*背景会自动平铺满盒子*/

     background-repeat属性:
        .box4{
            background-repeat:no-repeat;
        } /*背景图片是否重复,重复方式. repeat表示重复.
         属性有三种值: ① no-repeat;(不重复) ② repeat-x;(x轴重复) ③ repeat-y;y轴重复*/
         /*repeat-x;属性可以制作渐变背景*/
    /* 背景定位属性：
 background-position:100px 100px; position就是威视的意思
 background-position：向右移动量 向下移动量。 定位属性可以是负数， 同样的position属性后面可以用单词描述。描述左右的词有 left，center right。 描述上下的词有：top，center，bottom。*/

 /*css精灵：css sprite是一种css图像合并技术，是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
 css精灵的有点是减少了http的请求，原本需要四张小图片合并之后只需要一张图片就能显示。可以使用firework来进行定位 需要显示部分的宽度和高度就是盒子的宽高，xy轴数字就是定位数字 需要加负号*/



    .box5{
         background:red  url(1.jpg) no-repeat 100px 100px fixed; 等价于
        background-color:red; /*背景颜色:红色;*/
        background-image:url(1.jpg); /*背景图片*/
        background-repeat:no-repeat; /*背景是否重复*/
        background-position:100px 100px; /*背景图片位置*/
        background-attachment:fixed; /*背景图片固定*/
        /*可以省略任意部分*/
     }
     /*css3中将学习更多background属性*/
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</body>
background综合属性

欢迎大家关注DataLearner官方微信，接受最新的AI技术推送

相关博客

最热博客
