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

HTML中背景图片的相关内容

2015-12-11 15:36 706 查看
最近感觉HTMl中背景图片的应用非常广，比如Icon或者logo什么的都需要。就借这个机会总结一下。

1.背景图片中设置的坐标的作用：让图片自由显示在一个框中。

背景图片的坐标有2个数字组成，可参考下面代码。其中第一个数字代表容器的x轴，单位为像素，且向右为正方向；另外一个0代表容器的y轴，单位为像素，且向下为正方向。

下面展示一个具体的代码。所有的图片如图

。下面这段代码主要是为了显示图中二维码的，其他的都不显示。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#a {
height: 100px;
width: 100px;
background-image: url(images/person.jpg);
background-position: -60px -140px;
background-repeat: no-repeat;

}
#a a {
text-indent: -9999em;
float: left;
}
</style>
</head>

<body>
<div id="a">
<a href="#nogo">Icon</a>
</div>
</body>
</html>


运行代码，显示的为这张图中最左边的二维码。

所以背景图片的坐标点事相对于容器的左上角而言的

2.背景图片的作用范围。这里主要讨论背景图片是否支持内边距和外边距。还是使用上面的图片，图片的大小为600*337，现在我们就来设置一个<div>让它的大小等于框的边界，另外设置框的内编剧为80。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#b {
height: 337px;
width: 600px;
background-image: url(images/person.jpg);
background-position: 0px 0px;
padding: 100px;
}
</style>
</head>

<body>
<div id="b">

</div>
</body>
</html>


运行代码，可见背景图片覆盖了内边距部分。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航