正文

html页面背景设定相关

IP云
IP云V管理员/0 阅读
12/02
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>背景</title>

        <style>

            div{

                width: 300px;

                height: 300px;

                border: 10px solid red;

                background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493309945592&di=b3051d0bce128fd8b75d9c0b9c2ee033&imgtype=0&src=http%3A%2F%2Fpic67.nipic.com%2Ffile%2F20150514%2F21036787_181947848862_2.jpg) ;

                background-size: cover;

            }

            /*img{

                width: 100%;

                height: 100%;

            }*/

        </style>

    </head>

    <body>

        <!--

            若容器没设置宽高

            容器中的内容可以把容器撑起来

            但背景不会占用容器的宽高

        -->

    <div>

        <!--<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493309945592&di=b3051d0bce128fd8b75d9c0b9c2ee033&imgtype=0&src=http%3A%2F%2Fpic67.nipic.com%2Ffile%2F20150514%2F21036787_181947848862_2.jpg" />-->

    </div>

    </body>

</html>

        <!--

            background                     背景

            background-color       背景色

            background-image       背景图片

            background-repeat      背景图片是否重复

            background-position    背景位置

            background-attachment  背景图片是否滚动

        -->

            <!--

                background-position:;

                传两个参数

                分别代表X和Y

                可以直接传参数例如

                background-position:10px 10px;

                也可以传关键字

                X关键字有：Center，left，right//分别代表中间，左边，右边

                Y关键字有：top，center，bottom//分别代表上边，中间，下边

                若不传参数，则默认0px 0px或者left top

            -->

        <!--

            background-attachment：;

            scoll     背景滚动（默认属性）

            fixed     背景固定

        -->

            <!--

                背景还可以按照复合属性写法来写

            -->

相关阅读

目录[+]