CSS背景

喜欢你笑⠀

已于 2022-01-20 17:56:35 修改

阅读量904

点赞数 1

文章标签： css css3 html

于 2022-01-18 16:54:25 首次发布

本文链接：https://blog.csdn.net/xh7531/article/details/122562096

版权

我们在网页编程的过程中往往需要添加一些背景颜色、背景图像让网页更加美观，吸引更多的人们。

在CSS中，有一些用于设置HTML 元素背景效果的属性，如下表所示：

属性	描述
background-color	设置元素的背景颜色；
background-image	设置元素的背景图像
background-repeat	控制背景图像是否重复
background-attachment	控制背景图像是否跟随窗口滚动
background-position	控制背景图像在元素中的位置
background-size	设置背景图像的尺寸
background-origin	设置 background-position 属性相对于什么位置来定位背景图像
background-clip	设置背景图像的显示区域
background	背景属性的缩写，可以在一个声明中设置所有的背景属性

1. background-color

您可以使用 background-color 属性为元素设置一个背景颜色。

值	描述
color_name	使用具体颜色名称为元素设置背景颜色（例如 red）
hex_number	使用十六进制码为元素设置背景颜色（例如 #ff0000）
rgb_number	使用 rgb() 函数为元素设置背景颜色（例如 rgb(255,0,0)）
transparent	默认值，设置背景颜色为透明。
inherit	从父元素继承对背景颜色的设置

<!DOCTYPE html>
<html>
<head>
    <title>我眼里只有学习</title>
    <style>
    #bg {
        color: white;
        background-color: pink;
        margin: 20px;   /*设置外边距为 20px*/
        padding: 20px;  /*设置内边距为 20px*/
        border: 10px dotted skyblue;  /*设置一个宽 10px 的蓝色虚线边框*/
    }
    </style>
</head>
<body>
    <p id="bg">学习！学习！</p>
</body>
</html>

运行结果如下：

2. background-image

background-image 用来为某个元素设置背景图像，默认情况下浏览器会从元素内容的左上角开始（若有内边距则从元素内边距区域的左上角开始），在水平和垂直方向上重复背景图像，以填充整个元素区域）。

值	描述
url('URL')	指向图像的路径，可以将 url() 看作是一个函数，括号中的 URL 为图像的具体路径
none	默认值，不显示背景图像
inherit	从父元素继承背景图像的设置

<!DOCTYPE html>
<html>
<head>
    <title>我眼里只有学习</title>
    <style>
    #bi {
        color: hotpink;
        background-image: url('img/hei.jpg');
        margin: 20px;   /*设置外边距为 20px*/
        padding: 120px;  /*设置内边距为 120px*/
        border: 10px dotted skyblue;  /*设置一个宽 10px 的蓝色虚线边框*/
    }
    </style>
</head>
<body>
    <p id="bi"><br/><br/><br/><br/><br/><br/><br/>学习！学习！</p>
</body>
</html>

运行结果如下：

3. background-repeat

默认情况下背景图像会从元素内容的左上角开始（若有内边距则从元素内边距区域的左上角开始），在水平和垂直方向上重复背景图像以填充整个元素区域（不包括元素的外边距区域）。

值	描述
repeat	默认值，背景图像将在垂直方向和水平方向上重复
repeat-x	背景图像仅在水平方向上重复
repeat-y	背景图像仅在垂直方向上重复
no-repeat	背景图像仅显示一次，不在任何方向上重复
inherit	从父元素继承 background-repeat 属性的设置

<!DOCTYPE html>
<html>
<head>
    <title>我眼里只有学习</title>
    <style>
    #bi {
        color: hotpink;
        background-image: url('img/hei.jpg');
		background-repeat: repeat-x;
        margin: 20px;   /*设置外边距为 20px*/
        padding: 120px;  /*设置内边距为 120px*/
        border: 10px dotted skyblue;  /*设置一个宽 10px 的蓝色虚线边框*/
    }
    </style>
</head>
<body>
    <p id="bi"><br/><br/><br/><br/><br/><br/><br/>学习！学习！</p>
</body>
</html>

运行结果如下：

4. background-position

background-position 属性常用来设置背景图像的起始位置。

其中有：left top（左上）、left center（左中）、left bottom（左下）、right top（右上）、right center（右中）、right bottom（右下）、center top（中上）、center center（居中）、center bottom（中下）。

注意：使用一些关键词表示背景图像的位置，如果您仅设置第一个关键词，那么第二个将默认为 center。

值	描述
x% y%	使用百分比表示背景图像距离元素左上角的距离，x% 为水平方向，y% 为垂直方向，左上角为 0% 0%，右下角是 100% 100%，如果您仅设置第一个值，那么另一个值将是 50%，默认值为 0% 0%
xpos ypos	使用像素（px）或者其它 CSS 单位表示背景图像距离元素左上角的距离，xpos 为水平方向，ypos 为垂直方向，左上角为 0px 0px，右下角视元素的尺寸而定，百分比和单位的形式可以混用，如果您仅设置第一个值，那么另一个值将默认为 50%

5. background-attachment

background-attachment 属性用来设置背景图像，作用是固定在某个位置还是跟随页面一起滚动。

值	描述
scroll	默认值，背景图像随着页面元素的滚动而移动
fixed	当页面的其余部分滚动时，背景图像固定不动
inherit	从父元素继承 background-attachment 属性的设置

<!DOCTYPE html>
<html>
<head>
    <title>我眼里只有学习</title>
    <style>
    body {
        background-image: url('img/hei.jpg');
        background-repeat: repeat-x;
        background-attachment: fixed;
    }
    </style>
</head>
<body>
    <p>学习 学习 学习 学习 学习</p>
    <p>学习 学习 学习 学习 学习</p>
	<p>学习 学习 学习 学习 学习</p>
	<p>学习 学习 学习 学习 学习</p>
	<p>学习 学习 学习 学习 学习</p>
</body>
</html>

运行结果如下：

喜欢你笑⠀

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS背景

我们在网页编程的过程中往往需要添加一些背景颜色、背景图像让网页更加美观，吸引更多的人们。在CSS中，有一些用于设置HTML 元素背景效果的属性，如下表所示：属性描述 background-color 设置元素的背景颜色； background-image 设置元素的背景图像 background-repeat 控制背景图像是否重复 background-attachment 控制背景图像是否跟随窗口滚动 background-position .
复制链接

扫一扫