您的位置：首页 > Web前端 > HTML5

【HTML5学习笔记】24：CSS背景

2017-07-17 22:28 405 查看

本节学习CSS中的背景，边框和背景都可以使盒模型可见化。

①background-color设置背景颜色，使用transparent可以设置为透明色(默认)。

②background-image设置背景图片，使用none可以取消背景图片的设置。

③background-repeat设置背景平铺的方式，repeat-x水平平铺，repeat-y垂直平铺，repeat双向平铺(默认)，no-repeat禁止平铺。

④background-position设置背景位置，top上，bottom下，left左，right右，center居中。还可以用组合的方式设置右上角、左下角等。

⑤background-size设置缩放，none表示无缩放，cover等比例缩放(使图像至少覆盖容器)，contain等比例缩放(至少显示一张完整的)，长度高度以限定显示的长度和高度。100%表示全部充满。

⑥background-attachment设置滚动方式，scroll表示和内容一起滚动(默认)，fixed背景不动(水印效果)。

⑦background-origin设置背景起始点，border-box渗透到边框中，padding-box在边框内，content-box在内边距以内。

⑧background-clip设置背景的裁剪点，border-box盒子内都保留，padding-box渗透到边框内的会被裁掉，content-box渗透到边框和内边距的部分会被裁掉。

background的简写格式：background: 颜色图片 repeat attachment position / size origin clip;

*测试代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>CSS背景</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div>我是<b>HTML5</b>,我是<b>HTML5</b>,我是<b>HTML5</b>,</div>
<div>我是<b>HTML5</b>,我是<b>HTML5</b>,我是<b>HTML5</b>,</div>
<div>我是<b>HTML5</b>,我是<b>HTML5</b>,我是<b>HTML5</b>,</div>
<div>我是<b>HTML5</b>,我是<b>HTML5</b>,我是<b>HTML5</b>,</div>
<div>我是<b>HTML5</b>,我是<b>HTML5</b>,我是<b>HTML5</b>,</div>
</body>
</html>

@charset "utf-8";
body{
/*background-color: silver;*/
background-image: url(img.png);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}

div{
width: 500px;
height: 300px;
border: 10px dashed red;
padding: 50px;
background-color: orange;
background-image: url(img.jpg);
/*background-size: cover;*/
/*background-size: contain;*/
background-size: 100%;
/*background-origin: border-box;*/
/*background-origin: padding-box;*/
background-origin: content-box;
background-clip: content-box;
}
/*
div b{
background-color: red;
}

div b:first-child{
background-color:transparent;
}*/

运行结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航