CSS笔记10：css的背景——1.背景颜色 2.背景图片 3.背景平铺 4.背景图片位置 5.背景图像固定

最新推荐文章于 2024-02-19 14:13:37 发布

惹尘

最新推荐文章于 2024-02-19 14:13:37 发布

阅读量274

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/weixin_46037153/article/details/109815357

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在这里插入图片描述

1.背景颜色 2.背景图片 3.背景平铺 4.背景图片位置 5.背景图像固定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css背景</title>
	</head>

	<style>
		/* 1.背景颜色-默认透明色 */
		.box {
			width: 200px;
			height: 200px;
			/* background-color: transparent;透明的 */
			background-color: red;
		}

		/* 2.背景图片 */
		.image {
			width: 200px;
			height: 200px;
			/* 不要拉下url() */
			background-image: url(img/2.png);
			/* background-image: none;默认是none */
		}

		/* 3.背景平铺 */
		.image1 {
			width: 400px;
			height: 400px;
			background-image: url(img/2.png);
			/* background-repeat: no-repeat;不平铺 */
			/* background-repeat: repeat; */
			/* 平铺,默认情况下是平铺的 */
			/* background-repeat: repeat-x; */
			/* 沿着x轴平铺 */
			background-repeat: repeat-y;
			/* 沿着y轴平铺 */
			background-color: pink;
			/* 页面元素既可以添加背景颜色也可以添加背景图片,只不过背景图片会压住背景颜色 */

		}

		/* 4.背景图片位置 */
		.image12 {
			width: 400px;
			height: 400px;
			background-image: url(img/2.png);
			background-repeat: no-repeat;
			background-color: pink;
			/* background-position: left top; */
			/* background-position: center top; */
			/* 如果是方位名词 right center 和 center right 效果是等价的,跟顺序没有关系 */
			/* background-position: right center;*/
			/* 此时水平靠右对齐 第二个参数省略y轴,是垂直居中显示的 */
			/* background-position: right; */
			/* 此时一定是顶部水平居中对齐，省略x轴 */
			/* background-position: top; */

			/* 精确单位 */
			/* background-position: 50px 20px; */
			/* 一定前面是x,后面是y */
			/* background-position: 50px ; 一定是x*/

			/* 混合单位 */
			background-position: 20px center;
			/* 一定20px是x */
		}


		h3 {
			width: 118px;
			height: 40px;
			/* background-color: pink; */
			font-size: 14px;
			font-weight: 400;
			/* 不加粗 */
			line-height: 40px;
			background-image: url(https://game.gtimg.cn/images/js/title/title_sprite.png);
			background-repeat: no-repeat;
			background-position: left center;
			text-indent: 1.5em;
		}
		
		
		
		/* 背景色半透明 */
		.box1 {
			width: 400px;
			height: 400px;
			/* background: rgba(0,0,0,0.3); */
			background: rgba(0,0,0,.3);/* 最后一个参数是alpha透明度,取值范围在0-1之间,0.3可以写成.3 */
			}
	</style>
	<body>
		<!-- 
		1.背景颜色
		2.背景图片
		3.背景平铺
		4.背景图片位置
		5.背景图像固定
		 -->

		<!-- 1.背景颜色 -->
		<div class="box"></div>
		<br>
		<!-- 2.背景图片 -->
		<div class="image"></div>
		<br>
		<!-- 3.背景平铺background-repeat -->
		<div class="image1"></div>
		<br>
		<!-- 4.背景图片位置 -->
		<div class="image12"></div>
		<br>
		<!-- 王者荣耀背景图片位置案例 -->
		<h3>
			成长守护平台
		</h3>
		<!-- /* 背景色半透明 */ -->
	<div class="box1">
		
	</div>
		
	</body>
</html>

在这里插入图片描述

背景图像固定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景图像固定</title>
	</head>
	<style>
		body{
			background-image:url(http://ossweb-img.qq.com/upload/webplat/info/yxzj/20201109/114101396390284.jpg);
			background-repeat: no-repeat;
			background-position: left center;
			color: #FF0000;
			font-size: 30px;
			/* background-attachment: scroll;默认是滚动的 */
			background-attachment: fixed;
			/* 复合写法 */
			/* background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置; */
			/* background: red url(http://ossweb-img.qq.com/upload/webplat/info/yxzj/20201109/114101396390284.jpg) no-repeat fixed left center; */
		}
	</style>
	<body>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
		<p>天王盖地虎，宝塔镇河妖</p>
	</body>
</html>

在这里插入图片描述

惹尘

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记10：css的背景——1.背景颜色 2.背景图片 3.背景平铺 4.背景图片位置 5.背景图像固定

1.背景颜色 2.背景图片 3.背景平铺 4.背景图片位置 5.背景图像固定<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css背景</title> </head> <style> /* 1.背景颜色-默认透明色 */ .box { width: 200px; height: 200px; /*.
复制链接

扫一扫

专栏目录