CSS学习5

最新推荐文章于 2024-04-29 13:38:05 发布

aneyal

最新推荐文章于 2024-04-29 13:38:05 发布

阅读量581

点赞数 1

分类专栏：前端学习文章标签： css 学习 css3

本文链接：https://blog.csdn.net/aneyal/article/details/123462672

版权

前端学习专栏收录该内容

47 篇文章 2 订阅

订阅专栏

背景颜色图片和平铺

使用background-color设置背景图片，通过background-img设置背景图片

background-repeat表示平铺，其值no-repeat表示不平铺，repeat-x表示水平平铺，repeat-y表示纵向平铺

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 设置背景颜色 */
			.color{
				width:100px;
				height: 100px;
				background-color: aqua;
			}
			/* 设置背景图片 */
			.img{
				width:600px;
				height: 500px;
				background-color: aqua;
				background-image: url(img/t1.jpg);
				/* 水平平铺，图片没有覆盖到的地方露出背景颜色 */
				background-repeat: repeat-x;
			}
		</style>
	</head>
	<body>
		<div class='color'></div>
		<div class="img"></div>
	</body>
</html>

效果：

背景位置

通过background-position控制背景图片位置，可以通过方位名词（right，left，top，bottom center）控制背景图片位置，如果方位名词只写一个，另外一个默认为center.也可以使用坐标来定位，注意，左上角为（0,0），并且定义时，第一个值为x,第二个值为y。也可以两种方式混合使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.img{
				width:900px;
				height: 500px;
				background-color: aqua;
				background-image: url(img/t1.jpg);
				background-repeat: no-repeat;
				/* 使用方位名词定义背景图片位置 放于左上角*/
				/* background-position: left top; */
				/* 使用坐标定位 */
				/* background-position:10px 20px */
				/* 混合使用两种方式 */
				/* 放在水平上离左边10px，垂直上居中 */
				background-position: 10px,center;
			}
		</style>
	</head>
	<body>
		<div class="img"></div>
	</body>
</html>

效果：

背景附着

设定背景图片是固定还是随着页面滚动

通过设置background-attachment设置，值为scroll表示滚动，为fixed表示固定

背景简写

格式：background：背景颜色背景图片地址背景平铺背景滚动背景位置；

背景半透明

CSS3新特性

类似文字半透明，使用background:rgba(r,g,b,a),a的值在0-1之间，越小越透明

背景缩放

CSS3新特性

使用background-size设置图片尺寸，对于其参数，可以设置长度单位或百分比（设置百分比时参照的是盒子的宽高）

将参数设置为cover时，会自动调整缩放比例，保证图片始终填满背景区域，如有溢出部分，则会被隐藏

将参数设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				height: 300px;
				width: 500px;
				background-color: #00FFFF;
				background-image: url(img/t1.jpg);
				background-repeat: no-repeat;
				/* 设置背景图片尺寸宽200px*/
				/* background-size: 200px; */
				/* 通过百分比修改背景图片宽为盒子宽的一半 */
				/* background-size: 50%; */
				/* 保证图片始终完整显示在背景区域 */
				/* background-size: contain; */
				/* 保证图片始终填满背景区域 */
				/* background-size: cover; */
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

多背景图片

CSS3新特性

方法：用逗号分隔。

一个元素可以设置多重背景图像，每组属性之间用逗号分隔，如果设置的多重背景图之间存在交集，前面的背景图会覆盖在后面的背景图之上。同时为了避免背景色将图像覆盖，背景色通常定义在最后一组上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				height: 300px;
				width: 500px;
				background: url(img/i1.jpg) no-repeat scroll left top,
				url(img/i2.jpg) no-repeat right bottom pink			
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

效果：

凹凸文字效果

可以通过设置文字颜色和背景颜色一样，然后设置文字阴影，最后得到凸出和凹陷的文字效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				background-color: #ccc;
			}
			div{
				color: #ccc;
				font: 700 80px "microsoft yahei";
			}
			/* 利用文字阴影实现凸起文字 */
			.tu{
				text-shadow: 1px 1px 1px #000,
				-1px -1px 1px #fff;
			}
			/* 利用文字阴影实现凹下文字 */
			.ao{
				text-shadow: -1px -1px 1px #000,
				1px 1px 1px #fff;
			}
		</style>
	</head>
	<body>
		<div class="tu">我是突出文字</div>
		<div class="ao">我是凹陷文字</div>
	</body>
</html>

效果