zoukankan      html  css  js  c++  java
  • CSS 常用 background 设置

      CSS 背景图片设置:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet"/>
        <script type="text/javascript" charset="utf-8">
              mui.init();
        </script>
        <style>
            .container{
                background-image:url(img/view_002.jpg); 
                width:100%;
                height:300px;
                line-height: 300px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="container"></div>
    </body>
    </html>

    上述代码为一个类名为 container 的 DIV 插入了一张背景图片,效果如下:

    原图:

    网页效果图:

    为背景图片设置样式,使之更美观:

                /* 图片自适应大小 */
                /*background-size: 100% 100%;*/ 
                
                /* 图片居中 */
                background-position: center;
                
                /* 背景填充  */
                background-size: cover;
                
                /*背景模糊*/
                -webkit-filter: blur(2px);
            }
    ————by 一个被写程序耽误了的胖厨子
  • 相关阅读:
    今日成长笔记2016-11-18
    牛人博客
    c 、c++、java区别
    Java开发中的23种设计模式详解
    JAVA编程规范
    设计及编码质量改进之降低耦合度
    加密
    敏捷开发之Scrum扫盲篇
    RPC
    李洪强iOS开发Swift篇—04_运算符
  • 原文地址:https://www.cnblogs.com/monxiaopang/p/6560486.html
Copyright © 2011-2022 走看看