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. [Uiautomator篇][2] UiDeviceAPI介绍

    1 https://developer.android.com/training/testing/ui-testing/uiautomator-testing.html  http://www.cnb ...

  2. Spring中的注解 @Qualifier

    在使用Spring框架中@Autowired标签时默认情况下使用 @Autowired 注释进行自动注入时,Spring 容器中匹配的候选 Bean 数目必须有且仅有一个.当找不到一个匹配的 Bean ...

  3. 九度oj 题目1177：查找

    题目描述: 读入一组字符串(待操作的),再读入一个int n记录记下来有几条命令,总共有2中命令:1.翻转  从下标为i的字符开始到i+len-1之间的字符串倒序:2.替换  命中如果第一位为1,用命 ...

  4. Python之自动单元测试之一（unittest使用实例）

    软件的测试是一件非常乏味的事情,在测试别人编写的软件时尤其如此,程序员通常都只对编写代码感兴趣,而不喜欢文档编写和软件测试这类"没有创新"的工作.既然如此,为什么不让程序员在编写软 ...

  5. 浅谈android反调试之 签名校验

    反调试原理 很多时候,我们都需要进行修改修改应用程序的指令,然后重打包运行,重新打包就需要充签名. 利用签名的变化我们用于反调试.反调试实现代码如下: 为了更加隐藏,比较函数可能在SO层进行实现,如下 ...

  6. java集合四种遍历方式

    package conection; import java.util.Iterator;import java.util.LinkedList;import java.util.List; publ ...

  7. Docker 使用指南—— 基本操作

    版权声明:本文由田飞雨原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/98来源:腾云阁 https://www.qcloud ...

  8. 15深入理解C指针之---内存释放

    一.手动申请的内存,必须及时进行内存释放,否则容易造成内存泄露.主要代码形式为: #include <stdio.h> #include <stdlib.h> int main ...

  9. formValidator阻止提交跳转

    formValidator这个前台校验插件非常好用,其中有几个很有特点的方法可以单独提出使用,效果非常棒这里要说的是其核心方法之一,阻止提交动作,先校验,校验成功再执行提交动作 $("#ph ...

  10. Codeforces Gym101606 J.Just A Minim (2017 United Kingdom and Ireland Programming Contest (UKIEPC 2017))

    J Just A Minim 超级无敌大水题,但是被精度卡了一手,输出要精确到小数点后6位,我直接输出的... 代码: 1 #include<iostream> 2 #include< ...