css背景

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

一.背景

背景颜色、背景图片

背景颜色：使用单一色作为背景

背景图片：以图片做背景、以渐变色做背景

1.背景颜色：

属性：background-color：颜色

<!DOCTYPE html-->
<html>
<head>
<meta charset="utf-8"/>
<style>
div{
border:1px;
width:200px;
height:100px;
background-color:green;
}
</style>
</head>
<div class="box">
this is content.
this ia content.this is content.
</div>
<body>
</body>
</html>

复制代码

2.背景图片

属性：background-image

取值：url(背景路径);

background-image:url(image/logo.jpg);

<!DOCTYPE html-->
<html>
<head>
<meta charset="utf-8"/>
<style>
div{
border:1px solid red;
width:200px;
height:100px;
background-image:url("jd_logo.png");
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div>
</div>
</body> </html>

复制代码

3.背景重复

属性：background-repeat：

取值：

repeat：默认值，垂直和水平都平铺

repeat-x：仅在水平方向pingpu

repeat-y：仅在垂直方向平铺

no-repeat：不平铺，仅显示一次

<!DOCTYPE html-->
<html>
<head>
<meta charset="utf-8"/>
<style>
div{
border:1px solid red;
width:600px;
height:100px;
background-image:url("jd_logo.png");
background-repeat:repeat-x;
}
</style>
</head>
<body>
<div>
</div>
</body> </html>

复制代码

4.背景图片尺寸：

属性：background-size

取值：

valu:1 value2：宽度高度

value1% value2%：百分比

cover：扩大背景图像，使背景图像完全覆盖背景区域，直到碰到最后一个边缘才停止

contain：扩大背景图像，碰到第一个边缘就停止

<!DOCTYPE html-->
<html>
<head>
<meta charset="utf-8"/>
<style>
div{
border:1px solid red;
width:600px;
height:300px;
background-image:url("jd_logo.png");
background-repeat:repeat-x;
background-size:200px 200px;
}
</style>
</head>
<body>
<div>
</div>
</body> </html>

复制代码

5.背景图片定位

属性：background-attachment

取值：

scroll：默认，滚动定位

fixed：固定定位

<!DOCTYPE html-->
<html>
<head>
<meta charset="utf-8"/>
<style>
div{
background-image:url("jd_logo.png");
background-repeat:no-repeat;
background-position:center;
height:200px;
border:1px solid red;
background-size:400px;
background-attachment:scroll;
}
</style>
</head>
<body>
<div>
<h3>这是具有背景图片的文本,背景会随文档滚动</h>
</div>
</body> </html>

复制代码

6.背景定位

背景图像在区域中的哪个位置进行显示

属性:background-postion

取值：

x% y%：水平位置垂直位置

x y：水平位置垂直位置

x为正：向右移动

x为负：向左移动

y为正：向下移动

y为负：向上移动

left

right

top

bottom

center：居中（x，y）

x：可以取left，right，center

y：可以取top，bottom，center

常用方式：

1.创建一个与要显示图标大小一样的元素

2.为创建的元素设置背景图片（大背景图）

3.通过background-postion，将图片移动到指定的位置处

<!DOCTYPE html-->
<html>
<head>
<meta charset="utf-8"/>
<style>
div{
background-image:url("jd_logo.png");
background-repeat:no-repeat;
background-position:right;
height:200px;
border:1px solid red;
background-size:400px;
}
</style>
</head>
<body>
<div>
<h3>这是具有背景图片的文本</h>
</div>
</body> </html>

复制代码

7.背景绘制区域

background-clip

设置背景显示区域

属性：background-clip

值：

border-box：背景被裁剪到边框盒，为默认值

padding-box：背景被裁减到内边距框（忽略内边距）

content-box：背景裁减到内容框（只显示内容区域）

复制代码

8.背景的定位区域

背景从哪开始

属性：background-origin

取值：

border-box：从边框开始画

padding-box：从内边框开始画

content-box：从内容区域上开始画

复制代码

9.背景合并

属性：background：

background：color url（图像url）repeat attachment position；

常用方式：

background：url repeat position；

background：url（images/logo.jpg）no-repeat -15px 20px；

background：red；

background：url（logo.jpg）；

[HTML5开发] css背景

[HTML5开发] css背景

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

阅读推荐

浏览过的版块

用微信扫一扫