CSS3学习笔记-背景

最新推荐文章于 2022-12-08 21:05:42 发布

yangwensheng1122

最新推荐文章于 2022-12-08 21:05:42 发布

阅读量263

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/yangwensheng1122/article/details/77965143

版权

背景

Background-color：

backgound-image：

backgound-position：

backgound-

（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中可以指定背景图片，可以重新指定背景图片大小，像素或百分比。

伸展背景

background-size: contain 缩小图片以适合元素（维持像素长宽比）以较大的缩放比例为准。
background-size: cover 扩展元素以填补元素（维持像素长宽比）以较小的缩放比例为准。。
background-size: 100px 100px; 缩小图片至指定的大小设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"atuo(自动)"。
background-size: 50% 100% 缩小图片至指定的大小，百分比是相对包含元素的尺寸。