CSS学习6

乌鸦不像写字台

于 2024-08-31 12:28:56 发布

阅读量424

点赞数 7

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

本文链接：https://blog.csdn.net/qq_54641174/article/details/141720049

版权

css学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS背景

一、背景颜色和图片
二、背景位置
三、背景附着
四、背景简写
五、背景透明
六、背景缩放
七、多背景
八、凹凸文字
九、导航栏例子

一、背景颜色和图片

background-color: pink; 背景颜色
backgroundoimage: url(##.jpg); 背景图片
background-repeat: 平铺 repeat-x横向平铺，repeat-y纵向平铺；

平铺不到的地方显示背景颜色。

<html>
	<head>
	<style>
	div {
		width: 400px;
		height: 500px;
		background-color: pink;
		background-imgage: url(1.jpg);
		background-repeat: no-repeat;
	}
	</style>
	</head>
	<body>
	<div></div>
	</body>
</html>

二、背景位置

background-position: 更改背景图片位置，可以写两种值：

position包括top，center，bottom，left，right；顺序无所谓；
length写x和y坐标，以页面左上角为0点，向右为x轴，向下为y轴；
实际应用的时候也可以两种混搭: 10px center;

<html>
	<head>
	<style>
	div {
		background-color: pink;
		background-imgage: url(1.jpg);
		background-repeat: no-repeat;
		background-position: left top; /*默认左上角*/
		/*如果方位名词只写一个，另一个默认center*/
		background-position: 10px 30px;
		/*精确单位，第一个值是x坐标，第二个值是y坐标*/
	}
	</style>
	</head>
	<body>
	<div></div>
	</body>
</html>

三、背景附着

设置背景内容随对象内容滚动还是固定。

scroll; 背景内容随内容滚动
fixed; 背景内容固定

<html>
	<head>
	<style>
	body {
		background-color: pink;
		background-imgage: url(1.jpg);
		background-repeat: no-repeat;
		background-position: left top;
		background-attachment: scroll;	
	}
	</style>
	</head>
	<body>
	<div></div>
	</body>
</html>

四、背景简写

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

<html>
	<head>
	<style>
	body {
		/*background-color: pink;
		background-imgage: url(1.jpg);
		background-repeat: no-repeat;
		background-position: left top;
		background-attachment: scroll;	*/
		background: #000 url(#.png) no-repeat fixed center -25px;
	}
	</style>
	</head>
	<body>
	<div></div>
	</body>
</html>

五、背景透明

文字半透明：color: rgba(0,0,0,0.2);
背景半透明：background: rgba(0,0,0,0.3);

<html>
	<head>
	<style>
	body {
		background: #000 url(#.png) no-repeat fixed center -25px;
	}
	div {
		height: 400px;
		background: rgba(0,0,0,0.3);
	}
	</style>
	</head>
	<body>
	<div></div>
	</body>
</html>

六、背景缩放

background-size: 设置背景图片缩放

设置宽高精确单位，尽量只改一个值防止缩放失真
设置百分比
cover自动缩放占满，溢出的部分会被隐藏，使用最多
contain自动缩放，高宽有一个和背景一样大停止，保持图片完整性但是会有裸露部分

我们插入的图片img直接用width和height设置

<html>
	<head>
	<style>
	div {
		height: 400px;
		background: hotpink url(#.jpg) no-repeat;
		background-size: 100px;
		background-size: 50%; /*缩放为原来的一半*/
		background-size: cover;
		background-size: contain;
	}
	</style>
	</head>
	<body>
	<div></div>
	</body>
</html>

七、多背景

background: # # # #, # # #;用逗号分割设置多个背景图

一个元素设置多重背景图片
每组属性用逗号分隔
如果存在重叠，前面的背景图会覆盖在后面的背景图上
背景颜色通常定义在最后一组上

<html>
	<head>
	<style>
	div {
		height: 400px;
		background: url(#.jpg) no-repeat left top , 
		url(##.jpg) no-repeat left hotpink;
	}
	</style>
	</head>
	<body>
	<div></div>
	</body>
</html>

八、凹凸文字

<html>
	<head>
	<style>
	body {
		background-color: #ccc;
	}
	div {
		color: #ccc;
		font: 700 60px "微软雅黑";
	}
	div:first-child {
		text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
	}
	div:last-child {
		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 删除线

<html>
	<head>
	<style>
	a {
		width: 100px;
		height: 50px;
		background-color: orange;
		display: inline-block;
		text-align: center;
		line-height: 50px; /*行高等于盒子高度，文字居中*/
		color: #fff;
		font-size: 20px;
		text-decoration: none;
	}
	a:hover { /*鼠标经过*/
		background: url(#.png) no-repeat;
	}
	</style>
	</head>
	<body>
		<a href="#">qwe</a>
		<a href="#">asd</a>
	</body>
</html>