zoukankan      html  css  js  c++  java
  • CSS揭秘之《背景图案》

    网格

            html {
                background: #58a;
                background-image: linear-gradient(white 2px, transparent 0),
                linear-gradient(90deg, white 2px, transparent 0),
                linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
                linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
                background-size: 50px 50px, 50px 50px,
                10px 10px, 10px 10px;
            }

    clipboard.png

    具体效果见链接

    波点

    clipboard.png

    可以用如下代码来实现

    background: #655;
    background-image: radial-gradient(tan 30%, transparent 0);
    background-size: 30px 30px;

    但如果我想实现如下效果而非上面那样中规中矩

    clipboard.png
    其实原理是一样的

    background: #655;
    background-image: radial-gradient(tan 30%, transparent 0),
    radial-gradient(tan 30%, transparent 0);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;

    具体效果见链接
    需要注意的是第二层背景的偏移定位值必须是贴片宽高的一半

    棋盘

    html {
                background: #eee;
                background-image: linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0),
                                  linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0);
                background-position: 0 0, 15px 15px;
                background-size: 30px 30px;
            }
            html {
                background: #eee;
                background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
                linear-gradient(45deg, transparent 75%, #bbb 0),
                linear-gradient(45deg, #bbb 25%, transparent 0),
                linear-gradient(45deg, transparent 75%, #bbb 0);
                background-position: 0 0, 15px 15px,
                15px 15px, 30px 30px;
                background-size: 30px 30px;
            }

    clipboard.png

    用以上两者中的任何一种都可以,其实实现的原理就类似于

    clipboard.png

    具体效果见链接
    其实用svg方式来实现棋盘效果会更简单

            html {
                background: #eee url('data:image/svg+xml,
                <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25" >
                <rect x="50" width="50" height="50" />
                <rect y="50" width="50" height="50" />
                </svg>');
                background-size: 30px 30px;
            }

    效果与css实现一样,具体效果见链接
    小诀窍:在svg方案中我们用来让一行css出现在多选,是因为出于可读性的考虑,需要把一句 CSS 代码打断为多行,只需要用反斜杠()来转义每行末尾的换行就可以了

    本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=h12ajhabk2j

  • 相关阅读:
    Zookeeper安装
    JDK安装(Linux)
    Zookeeper简介
    修改tomcat配置解决定时任务多次重复执行
    解决.net mvc session超时的问题
    C#- JSON的操作
    Android SharedPreferences的理解与使用
    大屏适配:flexible.js的源码及配置
    charles抓包工具,抓手机端https设置
    Sanic二十:Sanic 扩展之sanic-openapi生成接口文档之sanic-openapi支持的数据类型
  • 原文地址:https://www.cnblogs.com/10manongit/p/12864386.html
Copyright © 2011-2022 走看看