CSS背景

最新推荐文章于 2024-03-06 20:44:31 发布

不会写代码的菜

最新推荐文章于 2024-03-06 20:44:31 发布

阅读量178

点赞数

分类专栏： css 文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_52629592/article/details/125363547

版权

css 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

本文介绍了如何使用CSS来设置网页背景，包括背景颜色、背景图片、平铺方式、尺寸调整和位置设定。通过示例代码展示了如何实现背景颜色为chartreuse，背景图片为'img/背景2.jpg'且不重复平铺，图片位置设为居中顶部，以及自定义背景图片大小的方法。

摘要由CSDN通过智能技术生成

背景

我们使用CSS可以对网页添加背景颜色,背景图片等操作,使网页更加美观,下面就将一些常用的设置网页背景的方法介绍如下:

background-color
- 设置背景颜色
- 我们可以自己设置自己喜欢的背景颜色
background-image
- 设置背景图片
- 通过url导入我们已经存放在项目中的图片并将其设置为网页的背景
background-repeat
- 设置背景重复(即背景平铺)
- 设置背景重复的目的是,当我们的背景图片大小不符合时,我们可以让背景图片重复铺满我们所要填充的位置
background-size
- 设置背景尺寸
- 使用此方法可以自己设置背景图片想要的大小
background- position
- 设置背景位置
- 背景位置可以设置为center(居中),或者top(顶部)等位置

代码示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            p{  
                width: 500px;
                height: 300px;
                background-color: chartreuse; /* 设置背景颜色*/
                background-image: url(img/背景2.jpg); /* 设置背景图片*/
                background-repeat: no-repeat; /* 设置背景图片为不重复*/
                background-position: center top; /* 设置背景图片的位置*/
                background-size: 300px 200px; /* 设置背景图片的大小*/
            }
        </style>
    </head>
    <body>
        <p>背景</p>
    </body>
</html>