CSS学习6

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="#">qwea>
		<a href="#">asda>
	body>
html>

你可能感兴趣的:(css学习,css,学习,前端)