CSS背景样式

世界尽头与你

2024-04-23 帮助1人

1.背景颜色：background-color

在CSS中，我们可以使用background-color属性来定义元素的背景颜色。

实例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>IMUSTCTF</title>
	<style type="text/css">
		div {
			width: 100px;
			height: 100px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<div>	
	</div>
</body>
</html>

学新通

2.背景图片样式：background-image

在CSS中，我们可以使用background-image属性来为元素定义背景图片

例如，我们可以通过如下的代码来为我们的网页设置背景图片：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>IMUSTCTF</title>
	<style type="text/css">
		body {
			background-image: url("https://img0.百度.com/it/u=4011354630,2790164740&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=394");
		}
	</style>
</head>
<body>
</body>
</html>

背景图片重复：background-repeat

在CSS中，我们可以使用background-repeat属性来定义背景图片的重复方式

background-repeat属性取值有4个

学新通

例如：通过如下代码设置图片只在水平方向上平铺展示：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>IMUSTCTF</title>
	<style type="text/css">
		body {
			background-image: url("https://img0.百度.com/it/u=4011354630,2790164740&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=394");
			background-repeat: repeat-x;
		}
	</style>
</head>
<body>
</body>
</html>

3.背景图片位置：background-position

在CSS中，我们可以使用background-position属性来定义背景图片的位置

background-position属性常用取值有两种：一种是“像素值”，另外一种是“关键字”

当background-position属性取值为“像素值”时，要同时设置水平方向和垂直方向的数值。例如，“background-position:12px 24px;”表示背景图片距离该元素左上角的水平方向距离为12px，垂直方向距离为24px。

实例：该网页展示的图片距离左上角水平距离为40px，垂直距离为20px

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>IMUSTCTF</title>
	<style type="text/css">
		body {
			background-image: url("https://img0.百度.com/it/u=4011354630,2790164740&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=394");
			background-repeat: no-repeat;
			background-position: 40px 20px;
		}
	</style>
</head>
<body>
</body>
</html>

学新通

当background-position属性取值为“关键字”时，也要同时设置水平方向和垂直方向的值，只不过这两个值使用关键字来代替而已

学新通

实例：如下表示图片居中展示：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>IMUSTCTF</title>
	<style type="text/css">
		body {
			background-image: url("https://img0.百度.com/it/u=4011354630,2790164740&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=394");
			background-repeat: no-repeat;
			background-position: center center;
		}
	</style>
</head>
<body>
</body>
</html>

4.背景图片固定：background-attachment

在CSS中，我们可以使用background-attachment属性来定义背景图片是随元素一起滚动还是固定不动

学新通

这篇好文章是转载于：学新通技术网

CSS背景样式

1.背景颜色：background-color

2.背景图片样式：background-image

3.背景图片位置：background-position

4.背景图片固定：background-attachment

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐