css画透明渐变背景图

7-24 1,270 views

参考 https://www.cnblogs.com/limeiky/p/6519452.html

效果图

代码

div {
    background-image: linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.1) 10%,
        rgba(255,255,255,0.2) 20%,
        rgba(255,255,255,0.3) 30%,
        rgba(255,255,255,0.4) 40%,
        rgba(255,255,255,0.5) 50%,
        rgba(255,255,255,0.6) 60%,
        rgba(255,255,255,0.7) 70%,
        rgba(255,255,255,0.8) 80%,
        rgba(255,255,255,0.9) 90%,
        rgba(255,255,255,1) 100%);

    position: absolute;
    bottom: -110px;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 150px;
}

自动生成twitter、facebook、whatsapp等等分享图标 Sharingbuttons

分享一个好用的第三方分享图标工具,支持主流外国网站 github:click me 使用方法 打开网址 https://sharingbuttons.io/ 按照自己想要的分享按钮,生成代码和c...

阅读全文

bootstrap 导航下拉菜单鼠标滑过显示隐藏

参考:https://bootsnipp.com/snippets/Vm7d 效果 CSS body { margin: 30px 0px; } .navbar-default .navbar-nav > li.dropdown:hover > a, .n...

阅读全文

非常好用的 文本编辑器 ckeditor

参考地址 :https://ckeditor.com 使用方法: 可以在这个网址,https://ckeditor.com/cke4/builder,自定义你的文本编辑器工具栏。 <textarea name="tes...

阅读全文

欢迎留言