搜索
您的当前位置:首页css背景有关的属性详细介绍

css背景有关的属性详细介绍

时间:2020-11-27 来源:智榕旅游
印象中css控制背景的就一个background,但是background是一个复合属性

它包括:

  • background-color:背景颜色,css支持的颜色表示方法,都可以用

  • background-image:背景图片(url)

  • background-repeat:背景是否重复(repeat、no-repeat、repeat-x、repeat-y)

  • background-position:背景定位(关键字、百分比、像素)

  • background-size:背景大小

  • background-origin:背景的定位区域

  • background-clip:背景绘制区域

  • background-attachment:规定背景图像是否固定或者随着页面的其余部分滚动

  • 除了这些,多背景、渐变、遮罩,我也把他们归到背景里吧。

    一个个看看吧-0-。

    开头说了,我很长时间都以为背景就是background这一个单词的玩意。因为我总是写成:

     .p{
     background: #000 url("1.jpg") no-repeat left center;/*颜色、图片、是否平铺、定位*/
     }

    不知道大家是不是也像我这样写啊。很简单吧,背景颜色、背景图片、是否重复、定位4个属性连着写。


    下面说其他属性

    背景的定位区域(background-origin):值是关键字,有3个

    .div{
     width: 400px;
     height: 200px;
     padding: 20px;
     border:10px solid rgba(255,255,255,.2);
     background: #000 url("1.jpg") no-repeat;
     background-origin:border-box;
     /*background-origin:padding-box;*/
     /*background-origin:content-box;*/
     }
  • border-boxcss背景有关的属性详细介绍

  • padding-boxcss背景有关的属性详细介绍

  • content-boxcss背景有关的属性详细介绍

  • Top