• CSS3 多个背景图像、线性渐变从上到下(默认)、线性渐变从左到右

    CSS3 多个背景图像

    CSS3 允许你在元素上添加多个背景图像。背景与背景直接用 ,逗号间隔。多背景设置的时候，我们要结合background-position和background-repeat一起去使用，才有效果。

    background-image: url('./img/img_flwr.gif'), url('./img/paper.gif');

     

    background-image: url('./img/img_flwr.gif'), url('./img/paper.gif');

    特别注意：多背景图，从右侧还是计算，你使用图的 先后顺序。

    右侧 第一个图，是你使用的第一个图。

    右侧 第二个图，是你使用的第二个图。以此类推。

    background-repeat: no-repeat , repeat;

    多背景图，平铺：

    background-repeat: no-repeat , repeat;

    从右侧还是计算，你使用图的 先后顺序。

    右侧 第一个repeat 表示 使用的第一个图的平铺方式为：平铺。

    右侧 第二个no-repeat 表示 使用的第一个图的平铺方式为：不平铺

     background-position: right bottom,left top;

     

    多背景图，定位：

    background-position: right bottom,left top; 从右侧还是计算，你使用图的 先后顺序。

    右侧 第一个left top 表示 我们希望 第一个图，水平居左，垂直居顶显示。

    右侧 第二个right bottom表示 我们希望 第二个图，水平居右，垂直居底显示。

    整体效果：

     

    线性渐变从上到下(默认)

    1.    <style>
    2.         *{
    3.             margin: 0;
    4.             padding: 0;
    5.         }
    6.         html,body{
    7.             width: 100%;
    8.             height: 100%;
    9.         }
    10.         body{
    11.             background-image: linear-gradient(to right,lightblue,pink,yellowgreen,skyblue);
    12.         }
    13.         .box{
    14.           
    15.             width: 350px;
    16.             height: 200px;
    17.             background-image: -webkit-linear-gradient(to right bottom,rgb(13, 207, 241) ,rgb(123, 255, 0));
    18.             background-image: -moz-linear-gradient(to right bottom, rgb(123, 255, 0),rgb(13, 207, 241));
    19.             background-image: -o-linear-gradient(to right bottom, rgb(123, 255, 0),rgb(13, 207, 241));
    20.             background-image: -ms-linear-gradient(to right bottom, rgb(123, 255, 0),rgb(13, 207, 241));
    21.             background-image: linear-gradient(to right bottom, rgb(123, 255, 0),rgb(13, 207, 241));
    22.        
    23.         }
    24.     style>
    25. head>
    26. <body>
    27.     <div class="box">div>
    28. body>

    效果

     

    线性渐变从左到右

    1.     <style>
    2.         *{
    3.             margin: 0;
    4.             padding: 0;
    5.         }
    6.         html,body{
    7.             width: 100%;
    8.             height: 100%;
    9.         }
    10.         body{
    11.             background-image: linear-gradient(to right,lightblue,pink,yellowgreen,skyblue);
    12.         }
    13.         .box{
    14.           
    15.             width: 350px;
    16.             height: 200px;
    17.             margin-bottom: 30px;
    18.             background-image: linear-gradient(90deg, pink,skyblue);
    19.        
    20.        
    21.         }
    22.     style>
    23. head>
    24. <body>
    25.     <div class="box">div>
    26. body>

    效果

     

  • 相关阅读:
    Redis7.0 编译安装以及简单创建Cluster测试服务器的方法 步骤
    ThinkingPython | 关于Programing 和 Debugging的认识
    get/post请求使用工具（apifox/postman/浏览器）能请求通但是java代码不行的问题解决
    java 手写KMP算法
    【结构型】桥接模式(Bridge)
    函数探秘：深入理解C语言函数，实现高效模块化编程
    Spring Data【Spring Data Redis、Spring Data ElasticSearch】(二)-全面详解（学习总结---从入门到深化）
    如何启用启用WordPress调试模式
    农林种植类VR虚拟仿真实验教学整体解决方案
    SpringMVC
  • 原文地址：https://blog.csdn.net/m0_71814235/article/details/126017070