CSS3系列 07 背景处理

最新推荐文章于 2023-10-15 20:45:29 发布

云崖先生

最新推荐文章于 2023-10-15 20:45:29 发布

阅读量183

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/weixin_43422005/article/details/118926153

版权

背景样式

纯色背景 background-color

使用background-color可定义纯色背景。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        div:nth-of-type(1){
            background-color: red;
            color: #fff;
            font-style: italic;
            font-size: 3rem;
            padding: 2rem;
            width: 300px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>hello world</div>
</body>
</html>

渲染结果：

图片背景 background-image

使用background-image: url(“path”)可定义图片背景。

图片背景本身不会改变盒模型的大小，这与在盒子中插入img标签是不同的。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        div:nth-of-type(1){
            background-image: url("./width_background_image.jpeg");
            color: #fff;
            font-style: italic;
            font-size: 3rem;
            padding: 2rem;
            width: 300px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>hello world</div>
</body>
</html>

渲染结果：

背景剪裁 background-clip

我们可以将背景设置为盒子的某一区域，比如content区域或者padding区域或者border区域。

请使用background-clip来进行指定。

它可设置的值如下表所示：

值	描述
border-box	包括边框
padding-box	不含边框，仅包含内边距与内容区域
content-box	不含边框、内边距，仅包含内容区域

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        div:nth-of-type(1){
            background-color: red;
            background-clip: content-box;
            color: #fff;
            font-style: italic;
            font-size: 3rem;
            padding: 2rem;
            width: 300px;
            text-align: center;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div>hello world</div>
</body>
</html>

渲染结果：