<!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. c/c++ 图相关的函数(二维数组法）

    c/c++ 图相关的函数(二维数组法) 遍历图 插入顶点 添加顶点间的线 删除顶点 删除顶点间的线 摧毁图 取得与v顶点有连线的第一个顶点 取得与v1顶点,v1顶点之后的v2顶点的之后的有连线的第一个 ...

  2. 特别篇：Hyper-v群集模拟实战演示

    介绍 由于前面几张的都是直接整理了下 九叔的hyper-v电子书发上来的,个人觉得他写的不是最详细,因此今天我按照自己的实际情况来写个模拟的实战演示.所有的东西都通过VMware WorkStatio ...

  3. Hibernate 5 入门指南-基于Envers

    首先创建\META-INF\persistence.xml配置文件并做简单的配置 <persistence xmlns="http://java.sun.com/xml/ns/pers ...

  4. python中自定义模块的引用

    在python中,实现能够在任何路径下都可以直接import,就必须将存放函数或类的文件添加到python的搜索路径. 其实很简单,主要步骤就是: import sys sys.path.append ...

  5. LeetCode算法题-Convert Sorted Array to Binary Search Tree（Java实现）

    这是悦乐书的第166次更新,第168篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第25题(顺位题号是108).给定一个数组,其中元素按升序排序,将其转换为高度平衡的二叉 ...

  6. Unity 琐碎(4) 可视化辅助调试Giamos

    Gizmos 类 可以在代码中绘制一些输出结果或者中间输出内容,比如计算后的包围盒等等 类变量 方法 作用 color 控制输出颜色 matrix Set the gizmo matrix used ...

  7. TOPWAY智能彩色TFT液晶显示模块

    TOPWAY 20年来专注工业显示, 以为全球工业用户提供稳定可靠和容易使用的液晶显示模块为己任, 智能彩色TFT液晶显示模块(以下简称智能模块), 就是我们在容易使用TFT 彩色液晶显示方向上为广大 ...

  8. 基于mycat高可用方案——数据库负载

    引言 传统企业级应用一般采取单台数据库,吞吐所有应用的读写,随着互联网的高速发展,以及微服务架构越来越普及,往往采用分库分表来支撑高速增长的大量业务数据吞吐.分库分表主要有两种方式:水平分表和垂直分库 ...

  9. 【JSOI2018】潜入行动

    [JSOI2018]潜入行动 树形\(DP\).设\(f_{i,j,0/1,0/1}\)表示以\(i\)为根的子树中,用了\(j\)个监听器,是否放置了监听器,是否被监听的方案数.转移就多讨论几种情况 ...

  10. C#事件の事件聚合器

    事件聚合器用于集中管理事件的订阅(Subscribe)和处理(Handle),要使用事件聚合器,首先要理解:事件(event)本质上是一个类. 传统的+=和-=不足: 1.管理很麻烦:2.不方便扩展. ...