CSS入门 0x1 背景图像、圆角_padding-bottom em-CSDN博客

本文链接：https://blog.csdn.net/funkstill/article/details/88679820

背景图像基础

默认，浏览器水平和垂直地重复显示背景图像。

body {
                background-image: url(http://img.pconline.com.cn/images/photoblog/8/9/6/0/8960500/20096/12/1244801595823_mthumb.jpg);
            }

水平平铺

body {
    background-image: url(http://img.pconline.com.cn/images/photoblog/8/9/6/0/8960500/20096/12/1244801595823_mthumb.jpg);
    background-repeat: repeat-x;
}

作为单独显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>background-image</title>
        <style>
            #branding {
                width: 956px;
                height: 521px;
                background-image: url(./images/logo02.png);
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
        <div id="branding"></div>
    </body>
</html>

在标题应用背景图像

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>background-image</title>
        <style>
            h1 {
                padding-left: 30px;
                background-image: url(./images/buble.png);
                background-repeat: no-repeat;
                background-position: left center;
            }
        </style>
    </head>
    <body>
        <h1>My Heading</h1>
    </body>
</html>

背景图像定位方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>background-image</title>
        <style>
            #px {
                background-position: 20px 16px;/*图片左上角相对于元素20px,16px*/
            }
            #percent {
                background-position: 25% 25%;/*图片25%,25%处的点相对于元素25%，25%*/
            }
            div {
                padding-left: 35px;
                width: 80px;
                height: 150px;
                background-image: url(./images/folder.png);
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
        <div id="px">像素定位</div>
        <div id="percent">百分比定位</div>
    </body>
</html>

圆角框

固定宽度的圆角框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>background-image</title>
        <style>
            .box {
                width: 424px;
                background: url(./images/tile2.gif) repeat-y;
            }
            .box h2 {
                background: url(./images/top2.gif) no-repeat left top;
                padding-top: 20px;
            }
            .box .last {
                background: url(./images/bottom2.gif) no-repeat left bottom;
                padding-bottom: 20px;
            }
            .box h2,.box p {
                padding-left: 20px;
                padding-right: 20px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <h2>I have a dream!</h2>
            <p class="last">I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation.</p>
        </div>
    </body>
</html>

灵活的圆角框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>background-image</title>
        <style>
            .box {
                width: 20em;
                background: #effce7 url(./images/bottom-left.gif) no-repeat left bottom;
            }
            .box-outer {
                background: url(./images/bottom-right.gif) no-repeat right bottom;
                padding-bottom: 1em;
            }
            .box-inner {
                background: url(./images/top-left.gif) no-repeat left top;
            }
            .box h2 {
                background: url(./images/top-right.gif) no-repeat right top;
                padding-bottom: 1em;
            }
            .box h2,.box p {
                padding-left: 1em;
                padding-right: 1em;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box-outer">
                <div class="box-inner">
                    <h2>I have a dream!</h2>
                    <p>
                            I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation.
                    </p>
                </div>
            </div>
        </div>
    </body>
</html>

山顶角

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>background-image</title>
        <style>
            /*利用蒙版实现角色切换*/
            .box {
                width: 20em;
                background: #effce7 url(./images/bottom-left.gif) no-repeat left bottom;
            }
            .box-outer {
                background: url(./images/bottom-right.gif) no-repeat right bottom;
                padding-bottom: 5%；
            }
            .box-inner {
                background: url(./images/top-left.gif) no-repeat left top;
            }
            .box h2 {
                background: url(./images/top-right.gif) no-repeat right top;
                padding-top: 5%;
            }
            .box h2,.box p {
                padding-left: 5%;
                padding-right: 5%;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box-outer">
                <div class="box-inner">
                    <h2>I have a dream!</h2>
                    <p class="last">I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation.</p>            
                </div>
            </div>
        </div>
    </body>
</html>