您的位置：首页 > Web前端 > CSS

CSS3学习笔记-背景

2017-09-13 14:11 211 查看

背景

Background-color：

backgound-image：

backgound-position：

backgound-

<style>

        body{

           background-image:url("timg.jpg");

           background-repeat: no-repeat;

           background-color: skyblue;

           background-position: center;

           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>

（1）backgound-clip

.div1{

            padding: 35px;

            background: yellow;

            border: 5px dotted black;

            /*background-clip: border-box;*/

            /*background-clip:padding-box ;*/

            background-clip: content-box;

        }

    </style>

</head>

<body>

<div class="div1">

    华电软件学院华电软件学院华电软件学院华电软件学院华电软件学院

    华电软件学院华电软件学院华电软件学院华电软件学院华电软件学院

    华电软件学院华电软件学院华电软件学院华电软件学院华电软件学院

    华电软件学院华电软件学院华电软件学院华电软件学院华电软件学院

    华电软件学院华电软件学院华电软件学院华电软件学院华电软件学院

</div>

Backgound-clip：border-box 背景被裁剪到边框盒

                Padding-box 背景被裁剪到内边距框

                Content-box 背景被裁剪到内容框

（2）Backgound-origin 确定背景图片的位置

div{

            padding: 25px;

            border: 5px dotted #000000;

            background-image:url("timg.jpg");

            background-repeat: no-repeat;

            background-position: left;

        }

        .div1{

            background-origin:padding-box;

        }

        .div2{

            background-origin:content-box;

        }

        .div3{

            background-origin:border-box;

        }

    </style>

</head>

<body>

<div class="div1">

    华点软件学院华点软件学院华点软件学院

    华点软件学院华点软件学院华点软件学院

    华点软件学院华点软件学院华点软件学院

    华点软件学院华点软件学院华点软件学院

    华点软件学院华点软件学院华点软件学院

    华点软件学院华点软件学院华点软件学院

</div>

<div class="div2">

    华点软件学院华点软件学院华点软件学院

    华点软件学院华点软件学院华点软件学院

    华点软件学院华点软件学院华点软件学院

    华点软件学院华点软件学院华点软件学院

    华点软件学院华点软件学院华点软件学院

    华点软件学院华点软件学院华点软件学院

</div>

<div class="div3">

    华点软件学院华点软件学院华点软件学院

    华点软件学院华点软件学院华点软件学院

    华点软件学院华点软件学院华点软件学院

    华点软件学院华点软件学院华点软件学院

    华点软件学院华点软件学院华点软件学院

    华点软件学院华点软件学院华点软件学院

</div>

（3）backgound-size 背景大小

body{

            background-image:url("dog2.jpg");

            background-size: 80px 60px;

            background-repeat: no-repeat;

            padding-top: 40px;

        }

    </style>

</head>

<body>

<p>原始图片：<img src="dog2.jpg"alt="dog" width="245px"height="150px"/></p>

</body>

CSS3以前，背景图像大小有图像实际大小决定

CSS3中可以指定背景图片，可以重新指定背景图片大小，像素或百分比。

伸展背景

   <style>

        .div1{

            background:url("dog2.jpg") no-repeat;

           /* background-size: 100px100px;*/ /*给一个值，第二个值为auto*/

           /* background-size: 50% 100%;*/ /*百分比就是相对包含元素的尺寸*/

            /*background-size:contain;*/ /*缩小图片以适合元素（维持像素长宽比）*/

            background-size: cover;

        }

    </style>

</head>

<body>

<div class="div1">

    <p>它是dog</p>

    <p>它是dog</p>

    <p>它是dog</p>

    <p>它是dog</p>

    <p>它是dog</p>

    <p>它是dog</p>

</div>

background-size: contain 缩小图片以适合元素（维持像素长宽比）以较大的缩放比例为准。

background-size: cover 扩展元素以填补元素（维持像素长宽比）以较小的缩放比例为准。。

background-size: 100px 100px; 缩小图片至指定的大小设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"atuo(自动)"。

background-size: 50% 100% 缩小图片至指定的大小，百分比是相对包含元素的尺寸。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3

相关文章推荐

新的分享

章节导航