9 CSS背景属性

CSS 背景属性

1. background-color（背景颜色）

页面的背景颜色有四种属性值表示，分别是transparent（透明），RGB十进制颜色表示，十六进制颜色表示和颜色单词表示。
属性使用：

 /*
background-color: transparent;   // 透明 
background-color: rgb(255,0,0); //  红色背景 
background-color: #ff0000;  //  红色背景
background-color: red;    // 红色背景 
*/

2. background-image（背景图片）

background-image可以引入一张图片作为元素的背景图像。默认情况下，background-image放置在元素的左上角，并在垂直和水平方向重复平铺。

 语法：background-image: url('图片地址')

 当同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上。 所以当背景图片没有被加载到，或者不能完全铺满元素时，就会显示背景颜色。

3. background-repeat（背景平铺方式）

CSS中，当使用图像作为背景了以后，都是默认把整个页面平铺满的，但是有时候在很多场合下面，页面并不需要这种默认的效果，而可能需要背景图像只显示一次，或者只按照指定方式进行平铺的时候，可以使用background-repeat来进行设置。
background-repeat专门用于设置背景图像的平铺方式，一般有四个值:

 默认是repeat（平铺）
no-repeat（不平铺）
repeat-x（X轴平铺）
repeat-y（Y轴平铺）

4. background-position（背景定位）

CSS中支持元素对背景图像的定位摆放功能，就是利用background-position属性来实现，以页面中元素的左上角为原点（0，0），把元素的内部区域当成一个坐标轴（上边框为X轴，越往左X的值越大，左边框为Y轴，越往下Y轴的值就越大，反之亦然），然后计算出背景图片的左上角与圆点的距离（x轴和y轴的距离），然后把背景图片放入到指定的位置上，对背景图片的位置进行精确的控制和摆放。
background-position的值分成两个，使用空格隔开，前面一个是背景图片左上角的x轴坐标，后面一个是背景图片左上角的y轴坐标。两个值都可以是正、负值。

 语法：background-position: x轴坐标 y轴坐标
背景定位的值除了是具体的数值以外，还可以是左（left）、中（center）、右（right）

5. background（背景样式缩写）

和字体属性一样，多个不同背景样式属性也是可以同时缩写的，不过不需要像字体那样按照一定的顺序，背景样式的缩写属性的顺序是不固定的，可以任意编排。

 语法：background: 背景颜色  背景图片  背景平铺方式  背景定位;

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS背景属性</title>
    <style>
        .c1{
            width: 800px;
            height: 600px;
            border: 1px solid red;
            /*background-color: #616161;*/
            background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201512%2F16%2F20151216233034_SvcEk.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1694941114&t=2c9c5a0a62949d8ee8640363a4c53a79");
            background-repeat: no-repeat;
            /*background-position: 100px 200px;*/
            background-position: center center;
            /*三合一简写形式*/
            /*background:  url("https://img1.baidu.com/it/u=1076648249,2160084473&fm=15&fmt=auto&gp=0.jpg") no-repeat center;*/
        }
    </style>
</head>
<body>
 
<div class="c1">hello css!</div>
 
</body>
</html>

posted @ 2023-08-21 18:35 生而自由爱而无畏阅读(68) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 10 CSS边框属性

· 13 CSS 的position属性

· CSS：CSS背景及属性-background

· CSS背景background八种属性

· css的背景属性

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话

公告

昵称：生而自由爱而无畏
园龄： 3年4个月
粉丝： 8
关注： 3

+加关注

2025年3月

日

一

二

三

四

五

六

python爬虫成神之路进行时

9 CSS背景属性

CSS 背景属性

1. background-color（背景颜色）

2. background-image（背景图片）

3. background-repeat（背景平铺方式）

4. background-position（背景定位）

5. background（背景样式缩写）

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	/*
	background-color: transparent; // 透明
	background-color: rgb(255,0,0); // 红色背景
	background-color: #ff0000; // 红色背景
	background-color: red; // 红色背景
	*/

	默认是repeat（平铺）
	no-repeat（不平铺）
	repeat-x（X轴平铺）
	repeat-y（Y轴平铺）

	语法：background-position: x轴坐标 y轴坐标
	背景定位的值除了是具体的数值以外，还可以是左（left）、中（center）、右（right）

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>CSS背景属性</title>
	<style>
	.c1{
	width: 800px;
	height: 600px;
	border: 1px solid red;
	/background-color: #616161;/
	background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201512%2F16%2F20151216233034_SvcEk.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1694941114&t=2c9c5a0a62949d8ee8640363a4c53a79");
	background-repeat: no-repeat;
	/background-position: 100px 200px;/
	background-position: center center;
	/三合一简写形式/
	/background: url("https://img1.baidu.com/it/u=1076648249,2160084473&fm=15&fmt=auto&gp=0.jpg") no-repeat center;/
	}
	</style>
	</head>
	<body>

	<div class="c1">hello css!</div>

	</body>
	</html>