浅析img与background-image使用技巧

2017-01-13 10:54:08来源:csdn作者:weixin_36185028人点击


最近学习html5时,发现自己对img与background-image用法的熟悉程度并不完善,就根据目前学习到css2的水平,找了一些相关资料,跟大家分享一下这两个标签的用法和区别


包括:1,img与background-image区别;2,img中设置文字悬浮(利用float或绝对定位);3,background的url网络图片链接不显示问题;4,如何理解“相对于 static 定位以外的第一个父元素进行定位”。


1.从用法上分析
1.1img标签的用法

语法:<imgsrc=""alt=""/>


Src里面为图片来源,alt表示当图片无法显示时图片位置会出现的说明性文字,在W3C标准中为必填选项,有助于辅助阅读,另外img还具有width,height,border等style属性


特点:img属于块级内联标签(个人理解为可设置宽高的inline标签,如有错误请指正)。有自闭合特性,通俗的说就是在网页中自己建一块位置自己占位。


1.2backgroun-image标签的用法

语法:background-image:url();


Url中为图片来源,通过background-position,background-size等属性来控制大小位置以及重复性等。


特点:background-image既不是Inline标签也不是block标签,无法单独使用,需要放在一个父标签里面使用,本身也是一个空标签,设置好之后作为父标签的背景。


2.img和background-image用法举例说明
2.1基本用法举例

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img与background</title>
<style type="text/css">
img{
width: 300px;
height: 150px;
border: 1px solid black;
}
div{
width: 300px;
height: 150px;
background-image: url(http://www.siaa.org.cn/Uploads/Editor/2015-06-19/5583bfebd6e71.jpg) ;
background-repeat: no-repeat;
background-size:300px 150px ;
border: 1px solid black;
}
</style>
</head>
<body>
<img src="http://www.siaa.org.cn/Uploads/Editor/2015-06-19/5583bfebd6e71.jpg"/>
<hr />
<div></div>
</body>
</html>

效果如下图所示:


注意几点:

(1)background-image与background是有区别的,background-image后面只能跟图片路径,需要另外设置background-repeat和background-size,而background是一个复合写法,后面可以跟url,no-repeat,位置等。这就是为什么background的url网络图片链接不显示的来源。


(2)background-image只有父级设置了宽高,图片才会显示出来,而且background-size如果没有设置的话会显示默认宽高,如果只设置了一个值,另外一个值会随着图片大小比例自动调整。


2.2使文字悬浮在background-image与img上面的方法

在实际使用过程中,有时我们需要把文字浮在图片之上,对于使用background-image添加图片时,只需在background-image所在父级元素内写上文字即可。如下所示


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img与background</title>
<style type="text/css">
div{
width: 300px;
height: 150px;
background-image: url(http://www.siaa.org.cn/Uploads/Editor/2015-06-19/5583bfebd6e71.jpg) ;
background-repeat: no-repeat;
background-size:300px 150px ;
border: 1px solid black;
}
</style>
</head>
<body>
<div><p>CSDN是全球最大的中文IT社区</p></div>
</body>
</html>效果:

当使用img来添加图片时,一般有两种方法设置文字悬浮于图片上方


2.1设置img和p为浮动样式,并为p(或img)设置margin值

举例说明:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img与background</title>
<style type="text/css">
img{
width: 300px;
height: 150px;
border: 1px solid black;
float: left;
}
p{
float: left;
margin-left: -300px;
}
</style>
</head>
<body>
<img src="http://www.siaa.org.cn/Uploads/Editor/2015-06-19/5583bfebd6e71.jpg"/>
<p>CSDN是全球最大的中文IT社区</p>
</body>
</html>效果:

当img和p都设置浮动之后,由于img非空标签,p中文字会跟img在同一行但是不会显示在img上方,此时需要设置margin负值使其到指定位置。


2.2使用position绝对定位

此时,需要考虑body里面的文字位于img的前面和后面的两种情况


2.2.1举例说明body中的文字位于img前面的情况
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img与background</title>
<style type="text/css">
.img1{
width: 300px;
height: 150px;
border: 1px solid black;
position: absolute;
left: 1px;
top: 1px;
z-index: -1;
}
</style>
</head>
<body>
<p class="pone">CSDN是全球最大的中文IT社区</p>
<img src="http://www.siaa.org.cn/Uploads/Editor/2015-06-19/5583bfebd6e71.jpg" class="img1"/>
</body>
</html>

效果:


说明1:文档流在默认状态下(无定位)的堆叠值z-index是递增的,而对于火狐浏览器z-index值默认初始为auto,对于ie浏览器默认为0,所以img的z-index值要比p高,若想p显示在上面,则需要设置img的z-index为一个比p低的值,经测试img的z-index为-1时刚好合适(因为火狐浏览器z-index值是auto,个人理解为未知值)
说明2:为什么不在p上设置z-index呢?其实在p上也可以设置z-index,不过也要在img上设置z-index,因为上面说过文档流的z-index是递增的,p设置之后,img就自动具备了一个比p高的z-index值,此时需要设置img的z-index小于p的z-index值即可。相对于直接在img上设置z-index,是不是显得麻烦一些呢。
说明3:默认状态下,img应位于p下方,现对img设置绝对定位,绝对定位参考对象为“相对于static定位以外的第一个父元素进行定位”,(怎么理解这句话呢,就是说相对父级及父级以上第一个有relative或者absolute定位的祖先元素进行定位,如果没有,就相对body进行定位,此处img就是相对body进行定位),定位之后的img就位于p层上面了;
2.2.2举例说明body中文字位于img后面的情况

在body中,文字img前面时,我们需要把img强制“塞到”p下面,而当文字在img后面时,需要把p“放在”img上面,P的z-index值本来就比img高,因此不需设置z-index值即可。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img与background</title>
<style type="text/css">
.img1{
width: 300px;
height: 150px;
border: 1px solid black;}
.pone{
position: absolute;
left: 10px;
top: 1px;
}
</style>
</head>
<body>
<img src="http://www.siaa.org.cn/Uploads/Editor/2015-06-19/5583bfebd6e71.jpg" class="img1"/>
<p class="pone">CSDN是全球最大的中文IT社区</p>
</body>
</html>

可见会产生类似的效果:



2.3为什么不使用相对定位代替绝对定位

因为相对定位元素转移之后,其原来的位置还被占着,后面元素无法填充,举例说明:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img与background</title>
<style type="text/css">
.img1{
width: 300px;
height: 150px;
border: 1px solid black;}
.pone{
position: relative;
left: 10px;
top: -170px;
}
</style>
</head>
<body>
<img src="http://www.siaa.org.cn/Uploads/Editor/2015-06-19/5583bfebd6e71.jpg" class="img1"/>
<p class="pone">CSDN是全球最大的中文IT社区</p>
<p class="ptwo">CSDN是全球最大的中文IT社区</p>
</body>
</html>效果如图:

可见当pone通过相对定位转移到相对位置,后面的ptwo无法填充起留下位置,在实际中并不实用。


3.从浏览器解析机制上分析

img属于html的标签,而background-image属于css样式,所以浏览器在解析时,会优先加载img标签,之后才会加载background-image,对于比较重要的图像,如logo,可使用img标签进行导入,这样会优先显示出来。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台