css背景及其应用

最新推荐文章于 2022-11-06 23:46:23 发布

不可爱仙女

最新推荐文章于 2022-11-06 23:46:23 发布

阅读量318

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/rraxx/article/details/104188439

版权

css背景及其应用

css背景(background)
背景位置(position)
背景附着
背景简写
背景半透明（CSS3）
背景缩放
多背景
凹凸文字效果
示例：王者荣耀导航栏

css背景(background)

background-color	背景颜色
back-ground-image	背景图片地址 url(图片地址必须写)
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
背景的合写（复合属性）
background:背景颜色背景图片地址背景平铺背景滚动背景位置

no-repeat(不平铺） repeat-x(横向平铺) repeat-y(纵向平铺)
在这里插入图片描述

背景位置(position)

语法：

background-position : length || length

background-position : position || position

参数：

说明：

设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

注意：

position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。

实际工作用的最多的，就是背景图片居中对齐了。
在这里插入图片描述

背景附着

说明：设置或检索背景图像是随对象内容滚动还是固定的。

background-attachment : scroll | fixed

默认是滚动的(scroll)
fixed(固定的)
scroll : 　背景图像是随对象内容滚动
fixed : 　背景图像固定

背景简写

background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：

background:背景颜色背景图片地址背景平铺背景滚动背景位置

background: pink url(picture/2.jpg) no-repeat fixed center100px;

背景半透明（CSS3）

CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,0.3);

最后一个参数是alpha 透明度 取值范围 0~1之间

注意：背景半透明是指盒子背景半透明，盒子里面的内容不收影响。

同样，可以给文字和边框透明都是 rgba 的格式来写。

color:rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);

在这里插入图片描述

背景缩放

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

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

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

background-image: url('images/gyt.jpg');
			background-size: 300px 100px;
			/* background-size: contain; */
			/* background-size: cover; */

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
			color: pink;
		}
		div{
			width: 600px;
			height: 400px;
			background: skyblue url(picture/2.jpg) no-repeat;
			/* 我们插入的图片img直接通过height weight设置就可以 */
			background-size:50% 
			/*尽量只改一个值，防止缩放失真扭曲 */
			 background-size: cover;
			/*会自动调整比例，保证图片始终填满背景区域，如有溢出部分则会被隐藏
			（图片进行等比例缩放，图片一定要保证宽度和高度同时满足盒子的大小，势必会有部分超出去，就看不见了）平时使用最多 */
			background-size: contain;
			/* 会自动调整缩放比例，保证图片始终完整显示在背景区域
			（图片进行等比例缩放，如果图片的高度或者宽度有一个和盒子一样大了，就不再进行缩放，这样的好处是保证了图片的完整，不会有缺失的部分，但是会有部分裸露） */
		}	
	</style>
</head>
<body>
	<div></div>
</body>
</html>

在这里插入图片描述

多背景

以逗号分隔可以设置多背景，可用于自适应布局

background-image: url('images/gyt.jpg'),url('images/robot.png');

在这里插入图片描述

凹凸文字效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	body
	{
		background-color: #ccc;
	}
	div{
		color: #ccc;
		font:700 80px "微软雅黑";
	}
	div:first-child{/* 
		text-shadow: 水平位置 垂直位置 阴影颜色； */
		text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;
	}
	div:last-child{/* 
		text-shadow: 水平位置 垂直位置 阴影颜色； */
		text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
	}
	</style>
</head>
<body>
	<div>凸起</div>
	<div>凹下</div>
</body>
</html>

示例：王者荣耀导航栏

文本的装饰：
text-decoration通常用于给链接修改装饰效果

值	描述
none	默认。定义标准的文本
underline	定义文本下的一条线。下划线也是我们链接自带的
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线

注意： 在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style>
	body{
		background-color: #000;
	}
	a{
		width: 200px;
		height: 50px;
		/* background-color: orange; */
		display: inline-block;/* 把a 内的行内元素转化为行内块元素 */
		text-align: center;/* 文字水平居中*/
		line-height: 50px;/* 行高等于盒子的高度 就可以使文字水平居中 */
		color: #fff;
		font-size: 20px;
		text-decoration: none;/* 取消下划线 */
	}
	a:hover{
		/* 鼠标经过，给我们加背景图片 */
		background: url(picture/h.png) no-repeat;
	}
	</style>
	<title>Document</title>
</head>
<body>
	<a href="#" id="">专区说明</a>
	<a href="#" id="">申请资格</a>
	<a href="#" id="">兑换奖励</a>
	<a href="#" id="">下载游戏</a>
</body>
</html>

不可爱仙女

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css背景及其应用

css背景及其应用css背景(background)css背景(background)background-color背景颜色back-ground-image背景图片地址 url(图片地址必须写)background-repeat是否平铺background-position背景位置background-attachment背景固定还是滚动...
复制链接

扫一扫