CSS3学习笔记----day02

最新推荐文章于 2022-11-19 19:18:12 发布

原创最新推荐文章于 2022-11-19 19:18:12 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

CSS3学习笔记专栏收录该内容

4 篇文章

订阅专栏

本文深入解析CSS3中背景属性的使用技巧，包括background-size、background-image、background-origin及background-clip等关键属性，通过实例展示如何设置背景尺寸、多背景图层叠及背景裁剪效果。

CSS3背景

背景尺寸

background-size 的单位可以是px,也可以是百分比，当尺寸为百分比的时候，相对于所在元素。 background-image可以置顶多张背景图

属性演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3背景</title>
    <style>
        #test{
            width: 200px;
            height: 170px;
            background-image: url("images/test.jpg");
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
<div id="test"></div>
</body>
</html>

在这里插入图片描述

多张背景：

使用多张背景时，图片层级堆叠，如果上层图片不是半透明或者存在透明像素，下层图片就不会显示出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3背景</title>
    <style>
        #test{
            width: 200px;
            height: 170px;
            background-image: url("images/1.png"),url("images/test.jpg");
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
<div id="test"></div>
</body>
</html>

在这里插入图片描述

background-origin

限制背景图片的范围，有三个范围：content-box、padding-box 或 border-box 区域

在这里插入图片描述

content-box：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3背景</title>
    <style>
        #test{
            border: #4361ee 2px solid;  /*设置边框，便于观察*/
            width: 200px;
            height: 170px;
            padding:35px;/*设置padding,把三个区域区分开*/
            background-origin: content-box;
            background-image: url("images/1.png"),url("images/test.jpg");
            background-repeat: no-repeat;/*背景不重复，便于观察，背景设置成重复，background-origin属性无法很好的体现*/
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
<div id="test">Hello</div>
</body>
</html>

在这里插入图片描述

padding-box：

<style>
        #test{
            border: #4361ee 12px solid;  /*增加了边框宽度，便于观察*/
            width: 200px;
            height: 170px;
            padding:35px;/*设置padding,把三个区域区分开*/
            background-origin: padding-box;/* 改成了padding-box  */
            background-image: url("images/1.png"),url("images/test.jpg");
            background-repeat: no-repeat;/*背景不重复，便于观察，背景设置成重复，background-origin属性无法很好的体现*/
            background-size: 100% 100%;
        }
    </style>

在这里插入图片描述

border-box：

    <style>
        #test{
            border: transparent 12px solid;  /*设置边框为透明色，放置遮挡背景图像，便于观察*/
            width: 200px;
            height: 170px;
            padding:35px;/*设置padding,把三个区域区分开*/
            background-origin: border-box;/*改成了border-box*/
            background-image: url("images/1.png"),url("images/test.jpg");
            background-repeat: no-repeat;/*背景不重复，便于观察，背景设置成重复，background-origin属性无法很好的体现*/
            background-size: 100% 100%;
        }
    </style>

在这里插入图片描述

background-clip

设置裁剪背景图，有三个区域，和background-origin区域相同

演示裁剪到content-box

    <style>
        #test{
            border: #4361ee 12px solid;  
            width: 200px;
            height: 170px;
            padding:35px;
            background-clip: content-box;
            background-image: url("images/1.png"),url("images/test.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    </style>