背景图片和插入图片区别

贵哥的编程之路

发布于 2020-10-28 10:35:03

7880

发布于 2020-10-28 10:35:03

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		 div{
            /*width: 150px;*/
            /*height: 170px;*/
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .box1
        {
        	background-image: url(./1.jpg);
        background-repeat: no-repeat;
        background-position: right bottom;
        }
	</style>
</head>
<body>
<div class="box1">我是文字</div>
<div class="box2">
    <img src="1.jpg" alt="">
    我是文字
</div>
</body>
</html>

核心：<!– 1.背景图片和插入图片区别? 1.1 背景图片仅仅是一个装饰, 不会占用位置插入图片会占用位置

1.2 背景图片有定位属性, 所以可以很方便的控制图片的位置插入图片没有定位属性, 所有控制图片的位置不太方便

1.3 插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片 –>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/08/31 ，如有侵权请联系 cloudcommunity@tencent.com 删除

搜索引擎