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

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .bgmore{
  8.                 width: 1000px;
  9.                 height: 1000px;
  10.                 background-image: url(img/ic_ms.png),url(img/icon_dutyfree_invite.png);
  11.                 background-clip: border-box;
  12.                 background-size: 100% 100%;
  13.                 /*background-size: cover;*/
  14.                 /*background-size: contain;*/
  15.                 border: 1px solid #000;
  16.             }
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <div class="bgmore"></div>
  21.     </body>
  22. </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. linux下文件显示被加锁如何解决？

    1.很多时候从别的机器上拷贝过来的文件,没有权限打开,上面有一个小锁. 2.判断是权限没有,查询ls -al得知文件的的所有者,和所有者在的组都不是本机 3.使用chown改变用户的所有者和所有者所在 ...

  2. eclipse中maven项目交付svn忽略配置文件

    eclipse与maven插件的结合为我们快速搭建开发环境提供了便捷条件,然而maven编译出来的class文件.配置文件和打包文件实际上都不需要进行版本控制,团队中每个人的开发环境可能不太一样,将. ...

  3. JVM指令详解（下）

    九.自增减指令 该指令用于对本地(局部)变量进行自增减操作.该指令第一参数为本地变量的编号,第二个参数为自增减的数量. 比如对于代码:                 int d=10; d++; d ...

  4. 27深入理解C指针之---字符串基础

    一.字符串:是以ASCII字符NUL结尾的字符序列,NUL表示为\0 1.定义:将字符按顺序存储在数组中,以NUL结尾. 2.特征: 1).每个字符串长度只是包含所有的字符,不包括最后的NUL,手动分 ...

  5. vue 上传文件 和 下载文件

    Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...

  6. 关于微信浏览器不支持offset()的兼容性处理

    问题的背景: 在手机触屏版中,当页面向上滑动的时候,导航条可以固定在顶部,通过判断offset().top的值来实现这个功能,其他的浏览器都可以,只有微信浏览器中出现问题(向上滑动的时候,导航条就会直 ...

  7. React native 横滑效果

    import { Component } from 'react'; import { StyleSheet, View, Text, TouchableOpacity, ScrollView, Di ...

  8. Codeforces Gym101502 H.Eyad and Math-换底公式

    H. Eyad and Math   time limit per test 2.0 s memory limit per test 256 MB input standard input outpu ...

  9. 一维数组解最长上升公共子序列(LCIS)

    #include<bits/stdc++.h> using namespace std; + ; int n,a[maxn],b[maxn],dp[maxn]; int main() { ...

  10. Wannafly挑战赛2 C.Butterfly（线段树优化枚举）

    题目链接  C.Butterfly 令$fd[i][j]$为以$s[i][j]$为起点开始往下走最大连续的‘X’个数 令$fl[i][j]$为以$s[i][j]$为起点开始往左下走最大连续的‘X’个数 ...