<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>38-背景图片和插入图片区别</title>

    <style>

        div{

            /*width: 150px;*/

            /*height: 170px;*/

            width: 300px;

            height: 300px;

            background-color: red;

        }

        .box1{

            background-image: url(images/girl.jpg);

            background-repeat:no-repeat;

            background-position: right bottom;

        }

    </style>

</head>

<body>

<!--

1.背景图片和插入图片区别?

1.1

背景图片仅仅是一个装饰, 不会占用位置

插入图片会占用位置

1.2

背景图片有定位属性, 所以可以很方便的控制图片的位置

插入图片没有定位属性, 所有控制图片的位置不太方便

1.3

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

-->

<div class="box1">我是文字</div>

<div class="box2">

    <img src="data:images/girl.jpg" alt="">

    我是文字

</div>

</body>

</html>

H5 38-背景图片和插入图片区别的更多相关文章

  1. C#中按模板操作Word —— 如何向Word中插入图片

    一.Word对象模型的重叠性分析 本文主要介绍通过书签Bookmark向Word文档中插入图片的方法.在此之前我们先简单讨论下Word对象模型的重叠性.如果你对Word对象模型还不熟悉,请参考本专栏第 ...

  2. java 在Excel中插入图片 POI实现

    一.POI简介 Jakarta POI 是apache的子项目,目标是处理ole2对象.它提供了一组操纵Windows文档的Java API 目前比较成熟的是HSSF接口,处理MS Excel(97- ...

  3. 网页实现插入图片—css与html的区别

    Q1.二者有何区别?A1.写在css里面的图片是以背景图形式存在的,而写在html里的是以<img>标签形式存在的,在网页加载的过程中,以css背景图存在的图片会等到结构加载完成(网页的内 ...

  4. canvas插入图片设置背景，渐变

    ##在canvas中插入图片(需要image对象) 1.canvas操作图片时,必须要等图片加载完才能操作 2.drawImage(image, x, y, width, height) 其中 ima ...

  5. CSS - 插入图片img和背景图片

    1. img插入图片,用的最多,比如产品展示类 .section img { width: 200px;/* 插入图片更改大小 width 和 height */ height: 210px; mar ...

  6. 富文本编辑器UEditor自定义工具栏（二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符）

    导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...

  7. C#调用NPOI组件读取excel表格数据转为datatable写入word表格中并向word中插入图片/文字/书签 获得书签列表

    调用word的com组件将400条数据导入word表格中耗时10分钟简直不能忍受,使用NPOI组件耗时4秒钟.但是NPOI中替换书签内容的功能不知道是不支持还是没找到. 辅助类 Excel表格数据与D ...

  8. html插入图片和多媒体

    图像 插入图像 在html网页中插入图片唯一的标记就是,它的src属性是必需属性 <img src="图片地址"> 属性 说明 src 图像的源文件 alt 提示文字 ...

  9. 自己写的POIUtil，主要解决从不同的HSSFWorkbook复制sheet以及根据单元格插入图片等

    复制sheet的原始代码网上找的,但是小问题很多,然后自己动手改了一下: 根据单元格信息动态插入图片,如果单元格有文字,图片的位置会在文字之后,如果同样的位置已有图片则会往下插入. import or ...

随机推荐

  1. shell编程-输入/输出重定向（十一）

    linux中文件描述符 linux跟踪打开文件,而分配的一个数字,通过这个数字可以实现对文件的读写操作 用户可以自定义文件描述符范围是:3-max,max跟用户的ulimit –n 定义数字有关系,不 ...

  2. 你的MySQL服务器开启SSL了吗？SSL在https和MySQL中的原理思考

    最近,准备升级一组MySQL到5.7版本,在安装完MySQL5.7后,在其data目录下发现多了很多.pem类型的文件,然后通过查阅相关资料,才知这些文件是MySQL5.7使用SSL加密连接的.本篇主 ...

  3. f.lux 自动调节显示器色温

    我的环境 f.lux 我的使用感受是让屏幕看起来舒服一些,因为我有近视,所以需要保护眼睛. f.lux官网:https://justgetflux.com/ f.lux v4.47 windows 1 ...

  4. python爬虫起步...开发环境搭建，最简单的方式

    研究一门编程语言,一般第一步就是配置安装部署相关的编程环境.我认为啊,在学习的初期,大家不是十分了解相关的环境,或者是jar包,python模块等的相关内容,就不需要花费大量的时间去研究如何去安装它. ...

  5. 如何进行Apache虚拟机设置

    摘要:虚拟机Apache设置很多用户都遇到过,具体如何进行虚拟机Apache设置?怎样才能让虚拟机Apache设置达到最简单,最优化?本文为您讲解. Apache虚拟机设置有两种方法: 基于主机名的虚 ...

  6. VMware 15 pro虚拟机

    VMware虚拟机都到VMware Workstation 15 Pro,真快,VMware 14还没用好

  7. June 1. 2018 Week 22nd Friday

    What makes life dreary is the want of motive. 没有了目的,生活便暗淡无光. We all have dreams about our future, we ...

  8. SpringCloud之初识Hystrix熔断器 ----- 程序的保护机制

    在上一篇的-负载均衡Robbin中,我们简单讲解到负债均衡的算法和策略.负载均衡就是分发请求流量到不同的服务器,以减小服务器的压力和访问效率,但是当负载均衡的某个服务器或是服务挂掉之后,那么程序会出现 ...

  9. Python3 实现简易局域网视频聊天工具

    Python3 实现简易局域网视频聊天工具   1.环境 操作系统为 Ubuntu 16.04 python 3.5opencv-python 3.4.1.15numpy 1.14.5PyAudio ...

  10. Android面试题目整理与解说（二）

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/bz419927089/article/details/31386787 1.Dalvik和标准Jav ...