前端系列之CSS（背景和列表）

最新推荐文章于 2023-12-18 21:53:05 发布

原创最新推荐文章于 2023-12-18 21:53:05 发布 · 446 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

前端专栏收录该内容

58 篇文章

订阅专栏

本文详细介绍了CSS中背景样式的设置方法，包括背景颜色与背景图片的使用技巧。通过实例展示了如何定义背景颜色及图片，解释了不同属性如背景颜色、内边距、外边距和边框对元素尺寸的影响。

一.CSS背景

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            /*background-color: transparent;*/
            /*background-color: red;*/
            /*background-color: #ff0000;*/
            background-color: rgb(255,0,0);
            /*padding: 10px;!*背景可以包括内边距宽高320*!*/
            margin: 10px;/*不包含*/
            border: 20px solid;/*solid设置样式：虚线dashed ？直线solid  边框颜色默认=文本颜色*/
        }
    </style>
</head>
<body>
<div>background-color</div>
</body>
</html>

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            /*默认：背景图像位于元素的左上角，并在水平和垂直方向上重复*/
            background-image: url(image/banner.png);
            /*包含内边距，大小变为340px*/
            padding: 20px;
            /*不包含外边距*/
            margin: 20px;
            border: 20px solid;
            /*即设置背景颜色又设置背景图片，背景图片会覆盖调背景颜色，实际开发情况下都会设置，是为了防止背景图片有错误的情况下，页面的美观*/
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>