• 关于CSS背景background属性经典的配置


    background

    background-color: transparent;
    background-image: url("/assets/images/phonetitle1.gif");
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;

    1、background-color: transparent;

      设置元素的背景颜色

      属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。

      尽管在大多数情况下,没有必要使用 transparent。不过如果您不希望某元素拥有背景色,同时又不希望用户对浏览器的颜色设置影响到您的设计,那么设置 transparent 值还是有必要的。

    2、background-image: url("/assets/images/phonetitle1.gif");

    3、background-repeat: repeat;

    4、background-attachment: scroll;

    属性设置背景图像是否固定或者随着页面的其余部分滚动。

    scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
    fixed 当页面的其余部分滚动时,背景图像不会移动。
    inherit 规定应该从父元素继承 background-attachment 属性的设置。

     

     

     

    5、background-position: 0% 0%;

    设置背景图像的起始位置。

    • top left
    • top center
    • top right
    • center left
    • center center
    • center right
    • bottom left
    • bottom center
    • bottom right

    如果您仅规定了一个关键词,那么第二个值将是"center"。

    默认值:0% 0%。

    x% y%

    第一个值是水平位置,第二个值是垂直位置。

    左上角是 0% 0%。右下角是 100% 100%。

    如果您仅规定了一个值,另一个值将是 50%。

    xpos ypos

    第一个值是水平位置,第二个值是垂直位置。

    左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

    如果您仅规定了一个值,另一个值将是50%。

    您可以混合使用 % 和 position 值。

     

    6、background-clip: border-box;

      背景的绘制区域。

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

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

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

    7、background-origin: padding-box;

      

    8、background-size: auto auto;

    规定背景图像的尺寸。

                          background-size: length|percentage|cover|contain;

    length

    设置背景图像的高度和宽度。

    第一个值设置宽度,第二个值设置高度。

    如果只设置一个值,则第二个值会被设置为 "auto"。

    percentage

    以父元素的百分比来设置背景图像的宽度和高度。

    第一个值设置宽度,第二个值设置高度。

    如果只设置一个值,则第二个值会被设置为 "auto"。

    cover

    把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

    背景图像的某些部分也许无法显示在背景定位区域中。

    contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
  • 相关阅读:
    vue-cli3配置开发环境和生产环境
    vue配置开发环境和生产环境
    js实现div拖拽互换位置效果
    axios用post提交的数据格式
    面试题会被问及哪些?(总结)
    深入理解vue
    nodejs 前端项目编译时内存溢出问题的原因及解决方案
    MUI框架开发HTML5手机APP(一)--搭建第一个手机APP
    关于if省略{}时的一些问题
    函数声明的两种形式的区别
  • 原文地址:https://www.cnblogs.com/xiaopihai988/p/4593329.html
Copyright © 2020-2023  润新知