zoukankan      html  css  js  c++  java
  • CSS背景属性

    CSS背景属性

    1、background-attachment 属性

      scroll:默认值。背景图像会随着页面其余部分的滚动而移动。

      fixed:当页面的其余部分滚动时,背景图像不会移动。

      inherit:规定应该从父元素继承 background-attachment 属性的设置。

    body 
      { 
      background-image: url(bgimage.gif); 
      background-attachment: fixed;
      }

    2、background-clip 属性

      border-box:背景被裁剪到边框盒。

      padding-box:背景被裁剪到内边距框。

      content-box:背景被裁剪到内容框。

    div
    {
    background-color:yellow;
    background-clip:content-box;
    }

    3、background-origin 属性

      border-box:背景图像相对于边框盒来定位。

      padding-box:背景图像相对于内边距框来定位。

      content-box:背景图像相对于内容框来定位。

    div
    {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-position:left;
    background-origin:content-box;
    }

    4、background-size 属性

      length
      设置背景图像的高度和宽度。
      第一个值设置宽度,第二个值设置高度。
      如果只设置一个值,则第二个值会被设置为 "auto"。
      percentage
      以父元素的百分比来设置背景图像的宽度和高度。
      第一个值设置宽度,第二个值设置高度。
      如果只设置一个值,则第二个值会被设置为 "auto"。
      cover
      把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
      背景图像的某些部分也许无法显示在背景定位区域中。
      contain

      把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 

    div
    {
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
    }

     例子1:

     500px;
    height: 500px;
    border: 15px double #0000ff;
    padding: 20px;
    background: #f0f url("img/panda.jpg") no-repeat;
    background-clip: border-box;
    background-origin: border-box;
    background-size: 100%;

    如图:

    例子2:

     500px;
    height: 500px;
    border: 15px double #0000ff;
    padding: 20px;
    background: #f0f url("img/panda.jpg") no-repeat;
    background-clip: padding-box;
    background-origin: content-box;
    background-size: 100%;

    如图:

    如果 background-attachment 设置了 fixed 属性,则设置 background-origin 无效果。

  • 相关阅读:
    [mysql]修改 mysql 数据库端口
    [Angular]基础饼图之我如何将鼠标显示内容的数字 " 1" 去掉
    大三总结
    有符号8位整数的冒泡排序
    康托逆展开
    判断计算机是大端还是小端存储方式及分析
    C语言细节——献给入门者(三)
    C语言复杂声明
    病毒篇
    C语言细节——献给初学者(二)
  • 原文地址:https://www.cnblogs.com/hu555snow/p/5710948.html
Copyright © 2011-2022 走看看