zoukankan      html  css  js  c++  java
  • css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透明)

    1、背景颜色

    默认为transparent(透明)

    (1)将背景设置为greenyellow:

    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                div{
                     200px;
                    height: 150px;
                    background-color: greenyellow;
                }
            </style>
        </head>
    
        <body>
            <div>今天是星期一</div>
        </body>
    
    </html>

    2、背景图片

    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                div{
                     200px;
                    height: 150px;
                    background-image: url(img/back.jpg);
                }
            </style>
        </head>
    
        <body>
            <div></div>
        </body>
    
    </html>

    3、背景平铺

    如果要在html页面上对背景进行平铺,可以使用background-repeat属性,属性的值有:repeat、no-repeat、repeat-x、repeat-y,默认情况下是平铺的

    (1)平铺:

    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                div{
                     400px;
                    height: 300px;
                    background-image: url(img/back.jpg);
                    background-repeat: repeat;
                }
            </style>
        </head>
    
        <body>
            <div></div>
        </body>
    
    </html>

     (2)延x轴平铺:

    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                div{
                     400px;
                    height: 300px;
                    background-image: url(img/back.jpg);
                    background-repeat: repeat-x;
                }
            </style>
        </head>
    
        <body>
            <div></div>
        </body>
    
    </html>

    (3)延y轴平铺:

    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                div{
                     400px;
                    height: 300px;
                    background-image: url(img/back.jpg);
                    background-repeat: repeat-y;
                }
            </style>
        </head>
    
        <body>
            <div></div>
        </body>
    
    </html>

    4、背景图片的位置

    可以使用方位名词(top、center、bottom、left、center、right,如果是方位名词,两个位置名词不区分先后顺序)或者精确单位

    (1)方位名词

    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                div{
                     400px;
                    height: 300px;
                    background-image: url(img/back.jpg);
                    background-repeat: no-repeat;
                    background-position: center top;
                }
            </style>
        </head>
    
        <body>
            <div></div>
        </body>
    
    </html>

     (2)精确单位(xy坐标又先后顺序)

    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                div{
                     400px;
                    height: 300px;
                    background-image: url(img/back.jpg);
                    background-repeat: no-repeat;
                    background-position: 25px 40px;
                }
            </style>
        </head>
    
        <body>
            <div></div>
        </body>
    
    </html>

     (3)混合单位

    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                div{
                     400px;
                    height: 300px;
                    background-image: url(img/back.jpg);
                    background-repeat: no-repeat;
                    background-position: center 40px;
                    background-color: pink;
                }
            </style>
        </head>
    
        <body>
            <div></div>
        </body>
    
    </html>

    5、背景固定

    background-attachment:当属性的值定义为scroll的时候背景图片随对象的内容滚动;当定义为fixed的时候,背景图片固定

    (1)一般的书写方式

    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                body{
                     400px;
                    height: 1300px;
                    background-image: url(img/back.jpg);
                    background-repeat: repeat;
                    background-position: center 40px;
                    color:red;
                    background-attachment: fixed;
                    
                }
            </style>
        </head>
    
        <body>
            <p>下雪了!!!</p>
            <p>下雪了!!!</p>
            <p>下雪了!!!</p>
            <p>下雪了!!!</p>
            <p>下雪了!!!</p>
            <p>下雪了!!!</p>
            <p>下雪了!!!</p>
            <p>下雪了!!!</p>
            <p>下雪了!!!</p>
            <p>下雪了!!!</p>
            <p>下雪了!!!</p>
            <p>下雪了!!!</p>
        </body>
    
    </html>

     当滚动鼠标的时候,文字滚动,图片不动

    (2)复合性的书写方式:

    上面的css代码可以简写为:

            <style>
                body{
                     400px;
                    height: 1300px;
                    background: url(img/back.jpg) repeat fixed center 40px;
                    color:red;    
                }
            </style>

    没有先后顺序的要求

    6、背景颜色半透明

    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                div{
                     200px;
                    height: 300px;
                    background: rgba(0,0,0,0.2);
                            }
            </style>
        </head>
    
        <body>
           <div>半透明显示</div>
        </body>
    
    </html>

  • 相关阅读:
    有固态硬盘的电脑还是不流畅?这些值得了解
    一名神舟笔记本电脑用户的内心独白
    验证码无法显示:Could not initialize class sun.awt.X11GraphicsEnvironment 解决方案
    nginx 负载均衡时,一台tomcat宕机时的问题 自动切换
    tomcat结合nginx使用小结
    金九银十面试突击,卧底去阿里、京东、美团、腾讯带回来的面试题(内含答案)
    干货分享 ▏Jmeter-场景设置/运行/参数化访问地址/【一次性打包呈现】
    各类APP功能测试用例/设计方法/数据库和日记分析——【范本】
    软件测试这些坑,千万不要踩!
    技术面试中,遇到不会回答的问题怎么破?来,教3招!
  • 原文地址:https://www.cnblogs.com/zhai1997/p/13023299.html
Copyright © 2011-2022 走看看