• CSS3-给网页添加图片


    给网页添加图片:

    1、background-attachment: scroll--------随文本一块滚动 ; background-attachment: fixed-----固定在一个位置上

    2、background-size不支持IE8

    background-size: width height;

      background-size: contain;/*迫使图片进行尺寸调整,保持图片的长宽比*/

      background-size: cover;/*宽高调整,适应元素,所以经常变形*/

      background-size: 100% auto;

    3、background-color: yellow;background: url(img.aaaaa.png) no-repeat;与

    background: url(img.aaaaa.png) no-repeat; background-color: yellow;是有区别的,在第一中方法中,先设置背景色为黄色,但再执行background的时候,会自动设置默认值为透明,所以背景图片颜色会覆盖黄色

    4、在使用背景图片的时候尽量使用css属性background,因为很多其他背景图片的css属性IE8都不支持

    5、线性渐变:

    background-image: linear-gradient(left,#900 20%,#fc0 30%,#fc0 70%,#900 80%);

    /*对于第一种颜色以及最后一种颜色,它是不需要定位,但如果有一个值则表示一种持续状态其余的是告诉浏览器子什么位置上的时候需要进行改变颜色*/

    谷歌并不支持这属性,需要加前缀-webkit-

    IE9及其之前的版本也都不支持渐变,需要先设置一个背景色

    线性重复渐变:background-image: -webkit-repeating-linear-gradient(45deg,#900 0,#900 10px,#fc0 10px,#fc0 20px)

    6、径向渐变: (椭圆或者圆形方式渐变)

    background-image: -webkit-radias-gradient(20% 40%,circle,red,blue);

    /*渐变方向从元素左边20%以及元素上方40%处开始*/

    (20% 40%,circle closest-side,red,blue)

    /*closest-side从中心点开始一直延续到离中心点最近的那一边,半径也就是中心点到这条边的长度,椭圆则两条边上下以及左右*/

     /*closest-corner到最近元素角的距离*/

     /*farther-side到最远一边的距离*/

     /*farther-Corner到最远角的距离*/

    7、如果图片并排排列的时候,如果图片的高度是参差不齐的,则需要使用表格

  • 相关阅读:
    【计算机组成】运算器与运算方法
    【计算机组成】数据表示
    【计算机组成】概论
    【Python】基础总结
    Robot Framework(14)- Variables 表的详细使用和具体例子
    Robot Framework(13)- RF 循环的详细使用
    Robot Framework(12)- 详细解读 RF 的变量和常量
    Robot Framework(11)- 用户关键字的详解
    Robot Framework(10)- 使用资源文件
    Robot Framework(9)- 使用变量文件
  • 原文地址:https://www.cnblogs.com/zhanghuiyun/p/5093651.html
Copyright © 2020-2023  润新知