h5背景
Posted sirlei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5背景相关的知识，希望对你有一定的参考价值。
1、背景属性复习： background-image background-color background-repeat background-position background-attachment
2、新增属性： background-size: background-size:x y; // 水平 垂直方向的尺寸，像素/百分比/auto/? background-size:cover; //保持宽高比不变，保证占满盒子，但不保证能看到全部 background-size:contain; //保持宽高比不变，保证看清全图，但可能占不满盒子
多背景： background-image:url(1.jpg),url(2.jpg);
background-origin 背景区域定位 border-box： 从border区域开始显示背景 padding-box： 从padding区域开始显示背景 content-box： 从content内容区域开始显示背景
background-clip 背景绘制区域 border-box： 从border区域开始绘制背景 padding-box： 从padding区域开始绘制背景 content-box： 从content内容区域开始显示背景
3、背景练习:
<!DOCTYPE html>
<html>
<head>
<title>your title name</title>
<meta charset="utf-8">
<meta name="Author" content="Wilson Xu">
<style type="text/css">
*{margin: 0;padding: 0;font-family: "Microsoft yahei";}
a{text-decoration: none;}
a img{display: block;border: none;}
li{list-style: none;}
.container{
width: 1200px;
padding: 20px;
margin: 10px auto;
border: 1px dashed #ccc;
}
.container h4{padding-bottom: 5px;}
.container ul{
width: 1200px;
overflow: hidden;
}
.container ul li{
float: left;
width: 331px;
padding: 20px;
height: 240px;
margin-right: 10px;
border: 10px solid rgba(10,10,10,.3);
background: url(‘images/1.jpg‘) no-repeat;
background-size: 371px auto;
}
.container ul li:last-child{margin-right: 0;}
.container ul.origin li:nth-child(1){
background-origin: border-box;
}
.container ul.origin li:nth-child(2){
background-origin: padding-box;
}
.container ul.origin li:nth-child(3){
background-origin: content-box;
}
.container ul.clip li:nth-child(1){
background-clip: border-box;
}
.container ul.clip li:nth-child(2){
background-clip: padding-box;
}
.container ul.clip li:nth-child(3){
background-clip: content-box;
}
section .pic{
width: 600px;
height: 400px;
margin: 20px auto;
border: 1px dashed #ddd;
background: url(‘images/3.jpg‘) no-repeat center center/auto 200px, url(‘images/2.jpg‘) no-repeat center center/auto 300px, url(‘images/1.jpg‘) no-repeat center center/auto 400px;
}
section p{
font-size: 14px;
color: #f01010;
}
</style>
</head>
<body>
<div class="container">
<section>
<h4>1、background-origin: border-box | padding-box | content-box</h4>
<ul class="origin">
<li></li>
<li></li>
<li></li>
</ul>
</section>
<section>
<h4 style="margin-top: 20px;border-top: 1px dashed #ccc;">2、background-clip: border-box | padding-box | content-box</h4>
<ul class="clip">
<li></li>
<li></li>
<li></li>
</ul>
</section>
<section>
<h4 style="margin-top: 20px;border-top: 1px dashed #ccc;">3、多背景:background: url(‘images/3.jpg‘) no-repeat center center/auto 200px, url(‘images/2.jpg‘) no-repeat center center/auto 300px, url(‘images/1.jpg‘) no-repeat center center/auto 400px;
</h4>
<div class="pic"></div>
<p>注释：复合写background-size的时候，一定要用/与其他值隔开。</p>
</section>
</div>
</body>
</html>
练习代码部分：
以上是关于h5背景的主要内容，如果未能解决你的问题，请参考以下文章