首页 > 代码库 > html页面背景设定相关

html页面背景设定相关

2024-09-17 21:35:34   215人阅读

<!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://www.mamicode.com/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     背景固定
        -->
            <!--
                背景还可以按照复合属性写法来写
            -->

 

html页面背景设定相关


联系
我们