CSS3 允许元素使用多个背景图像。

background-image: url(img/ic_ms.png),url(img/icon_dutyfree_invite.png);

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .bgmore{

                width: 1000px;

                height: 1000px;

                background-image: url(img/ic_ms.png),url(img/icon_dutyfree_invite.png);

                background-clip: border-box;

                background-size: 100% 100%;

                /*background-size: cover;*/

                /*background-size: contain;*/

                border: 1px solid #000;

            }

        </style>

    </head>

    <body>

        <div class="bgmore"></div>

    </body>

</html>

效果：

css3: background-image使用多个背景图像的更多相关文章

  1. css3 background

    background是一个很重要的css属性,在css3中新增了很多内容.一方面是原有属性新增了属性值,另一方面就是新增了3个属性. 一.css3中新增属性值介绍 css2的background有5个 ...

  2. 全屏背景：15个jQuery插件实现全屏背景图像或媒体

    动态网站通常利用背景图像或预加载屏幕,以保证所有资源都加载到页面上,在浏览器中充分呈现.现在很多网站都炫耀自己的图像作为背景图像全屏背景,追溯到旧的Flash网站却用自己的方式在HTML资源重布局. ...

  3. css那些事儿4 背景图像

    background:背景颜色,图像,平铺方式,大小,位置 能够显示背景区域即为盒子模型的填充和内容部分,其中背景图像将会覆盖背景颜色.常见的水平或垂直渐变颜色背景通常使用水平或垂直渐变的背景图像在水 ...

  4. CSS3 background属性

    background: #00FF00 url(bgimage.gif) no-repeat fixed top; background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性: ...

  5. css3基础-选择器+边框与圆角+背景与渐变

    Css3选择器相关: section > div直接子元素选择器 div + article相邻兄弟选择器(在元素之后出现) div ~ article通用兄弟选择器(在元素之后出现) 属性选择 ...

  6. 2013-10-25笔记，css: mini-width, 标准居中，样式中*号使用，背景图像位置定位

    mini-width:设置元素的最小宽度.該屬性值會對元素的寬度設置一個最小限制.因此,元素可以比制定值寬,但不能比制定值窄.不允許指定負值. 完美的居中佈局: body{text-align: ce ...

  7. Flutter之Decoration（边框、圆角、阴影、形状、渐变、背景图像等）

    1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆).  ...

  8. 转：Flutter Decoration背景设定（边框、圆角、阴影、形状、渐变、背景图像等）

    1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆).  ...

  9. CSS背景图像的简单响应

    本文设有很多,最理想的解决方案,响应图像只是其中之一.我们建议您查看不同的方法,然后再选择一个特定的响应图像解决方案,包括这两个:如何避免重复下载响应图像中选择响应图像解决方案. 大家都在谈论的的sr ...

随机推荐

  1. [adb 学习篇] adb pull

    adb pull   E:\uitest\testcase\CaseDemo\testcase\3dmark\3DMarkAndroid   /sdcard/3DMarkAndroid 假设:  E: ...

  2. 第001弹：Java 中创建对象的4种方式

    Java 是面向对象的语言,不可避免的,“对象”这个概念是 Java 语言的核心部分,这里来简单讨论一下在 Java 中创建一般对象的方法. 总结下来有以下4种创建对象的方法: 使用 new 关键字调 ...

  3. 开发者选择短视频SDK，为何青睐七牛云？

    从文字到图片再到视频的互联网内容媒介发展途径,随着 5g 技术的逐渐落地愈发清晰.短视频市场中的角力也随着诸多资本和创业者的涌入,进入到白热化阶段.这样的情况下,选择合适的短视频SDK产品就显得尤为重 ...

  4. 排列计数（bzoj 4517）

    Description 求有多少种长度为 n 的序列 A,满足以下条件: 1 ~ n 这 n 个数在序列中各出现了一次 若第 i 个数 A[i] 的值为 i,则称 i 是稳定的.序列恰好有 m 个数是 ...

  5. SharePoint 2013 Custom MasterPage

    <%@Master language="C#"%> <%@ Register Tagprefix="SharePoint" Namespace ...

  6. Error querying database找不到数据库的错误可能发生的原因..

    这个问题纠结了大概两个小时.原因是这样的,我刚刚换了一台新的电脑,准备把以前电脑上自己搭建的小项目放到新电脑上面,用myeclipse引入项目之后,启动项目在浏览器跑起来.然后输入账号密码登录主页,报 ...

  7. luogu 1004 方格取数 dp

    题目链接 题意 设有N*N的方格图(N<=9),我们将其中的某些方格中填入正整数,而其他的方格中则放入数字0.如下图所示: A 0 0 0 0 0 0 0 0 0 0 13 0 0 6 0 0 ...

  8. 使用 new Q_max_capacity 參數，同樣 loading 下，粗估耗電量（UI 上的 %)。

    Precondition : 除了 Q_max 外,其它參數皆同. old Q_max_capacity : 1500 mAh new Q_max_capacity : 2200 mAh 有一個 lo ...

  9. ThinkPHP 的 Vender的简单实用

    ThinkPHP 的 Vender的简单实用 框架版本:3.2 示例一.调用二维码类: Vendor('phpqrcode.phpqrcode'); $QRcode = new \QRcode (); ...

  10. Larevel5.1 打印SQL语句

    Larevel5.1 打印SQL语句 为了方便调试,开发时需要打印sql. 方法一(全局打开): SQL打印默认是关闭的, 需要在/vendor/illuminate/database/Connect ...