• CSS背景总结


    CSS背景

    1.1 背景颜色  background-color

    1.2 背景图片 background-image : url();  

     

     那么就出现了一个问题,背景图片的大小 小于 div标签设置的大小 ,那么背景图片就会循环铺满整个div 标签

    那么我们还有一个属性专门用来设置背景图片的平铺问题

    background-repeat : no-repeat; // 背景图片不平铺 

    background-repeat:  repeat-x;   //背景图片沿x轴平铺

    background-repeat: repeat-y;   //背景图片沿y轴平铺

    设置背景图片位置,当我们的背景图片是一张大图时,我们可以通过设置背景图片的位置,将想要展示的部分显示出来

    background-position : x   y;   

    x为正值表示将背景图片向右移动,y为正值表示将背景图片向下移动

    代码中的 background-position: -120px,10px;

    指的是将背景图片沿x轴向左移动 120px, 沿y轴向下移动10px

     背景图片固定

    background-attachment : scroll;   //背景图片随页面滚动

    background-attachment : fixed;   //背景图片固定

    这个背景图片固定,并不是图片真的固定在浏览器屏幕上,无论你怎么下滑都不消失,而是一个角度的固定,具体效果你可以敲一遍代码具体感受以下,或者你仔细看一下下面这段代码对应的效果

     

    随着下滑,效果依次如下

     

    背景图片透明度的属性设置

    background : rgba( 0,0,0,0.3 )

    前三个参数用来设置背景颜色,最后一个参数用来设置透明度,范围是 0 - 1,1是完全不透明。

  • 相关阅读:
    从马琳决赛被翻盘想到的
    C语言中的位运算
    瑞星杀毒软件所有监控已禁用!
    回来了,重新开始
    使用 javascript 标记高亮关键词
    我的webgis客户端引擎AIMap
    RPM 命令大全
    终结IE6下背景图片闪烁问题
    linux下挂载硬盘光驱和U盘
    在JavaScript中实现命名空间
  • 原文地址:https://www.cnblogs.com/zysfx/p/12760006.html
Copyright © 2020-2023  润新知