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
参数:
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position : top | center | bottom | left | center | right
说明:
设置或检索对象的背景图像位置。必须先指定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>