直接以一个轮播图案例为示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<title>title</title>
<link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<style>
.pc_imgBox {
display: block;
height: 400px;
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.m_imgBox {
display: block;
width: 100%;
}
.m_imgBox img {
display: block;
width: 100%;
}
</style>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="#" class="pc_imgBox hidden-xs"
style="background-image: url(../images/slide_01_2000x410.jpg)"></a>
<a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_01_640x340.jpg"
alt=""></a>
</div>
<div class="item">
<a href="#" class="pc_imgBox hidden-xs"
style="background-image: url(../images/slide_02_2000x410.jpg)"></a>
<a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_02_640x340.jpg"
alt=""></a>
</div>
<div class="item">
<a href="#" class="pc_imgBox hidden-xs"
style="background-image: url(../images/slide_03_2000x410.jpg)"></a>
<a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_03_640x340.jpg"
alt=""></a>
</div>
<div class="item">
<a href="#" class="pc_imgBox hidden-xs"
style="background-image: url(../images/slide_04_2000x410.jpg)"></a>
<a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_04_640x340.jpg"
alt=""></a>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="../lib/jquery/jquery.min.js"></script>
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
|
核心样式代码主要是
.pc_imgBox {
display: block;
height: 400px;
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
|
background-size
指定背景图像的大小
| 默认值: |
auto |
| 继承: |
no |
| 版本: |
CSS3 |
| JavaScript 语法: |
object object.style.backgroundSize=”60px 80px” |
语法
background-size: length|percentage|cover|contain;
|
属性值
| 值 |
描述 |
| length |
设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动) |
| percentage |
将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为”auto(自动)” |
| cover |
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 |
| contain |
此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 |
background-position
background-position属性设置背景图像的起始位置
注意：对于这个工作在Firefox和Opera，background-attachment必须设置为 fixed（固定）.
| 默认值: |
0% 0% |
| 继承: |
no |
| 版本: |
CSS1 |
| JavaScript 语法: |
object object.style.backgroundPosition=”center” |
语法
background-position:center;
background-position: 30% 20%;
background-position: 50px 100px;
|
属性值
| 值 |
描述 |
| left top left center left bottom right top right center right bottom center top center center center bottom |
如果仅指定一个关键字，其他值将会是”center” |
| x% y% |
第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％ |
| xpos ypos |
第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions |
| inherit |
指定background-position属性设置应该从父元素继承 |
