css3实现一个div设置多张背景图片及background-image属性

CSS3/CSS1 background-image 属性

语法:

background-image：<bg-image> [ , <bg-image> ]* <bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

默认值：none

取值：

none：无背景图。

< url >：使用绝对或相对地址指定背景图像。

< linear-gradient>：使用线性渐变创建背景图像。（CSS3）

< radial-gradient>：使用径向(放射性)渐变创建背景图像。（CSS3）

< repeating-linear-gradient>：使用重复的线性渐变创建背景图像。（CSS3）

< repeating-radial-gradient>：使用重复的径向(放射性)渐变创建背景图像。（CSS3）

说明：

设置或检索对象的背景图像。

如果设置了background-image，同时也建议作者设置background-color用于当背景图像不可见时保持与文本一定的对比。

对应的脚本特性为backgroundImage。

 

demo 今天群里大神，用css3 做的这个撕边效果，大家 感受下~

 

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>   </title>

  <style type="text/css">

  .w{ height: 300px;

     background:#f10180;

       background-image: repeating-radial-gradient(#fff,#fff 8px,#f10180 9px,#f10180 20px);

       background-size:20px 20px;background-repeat:repeat-x;

       background-position:0 -12px;

    }

  </style>

</head>

<body>

<div class="w"></div>

</body>

</html>

css3实现一个div设置多张背景图片及background-image属性

效果截图

 

你可能感兴趣的:(background)

  • i css svg,如何设置 CSS 背景图中的 SVG 的颜色 魔法少女皮皮瞎 icsssvg
    ColoringSVGsinCSSBackgroundImages如何设置CSS背景图中的SVG的颜色IloveusingSVGinCSSbackgroundimagesbutitsucksthatyoucan'talterthefillcoloreasilywithinyourCSS.Hereareafewwaysaroundthat.在CSS背景中我喜欢用SVG，但是，这会导致你无法用CSS很
  • 使用Python编写你的第一个算法交易程序 盼达思文体科创 Python量化金融python算法numpycondapandas金融
    背景Background最近想学习一下量化金融，总算在盈透投资者教育（IBKRCampus）板块找到一篇比较好的算法交易入门教程。我在记录实践过程后，翻译成中文写成此csdn博客，分享给大家。如果你的英语好可以直接看原文。原文在数据准备阶段，采用了pandas_datareader.data读取网络数据，实际中出现了很多问题，我换成了yfinance。可以参考文末完整代码。参考资料：https:/
  • 工具箱之父小程序源码（二）--萌宠大作战部分 jackzhuoa 微信小程序从零到万微信小程序游戏王者荣耀
    微信小程序搜一搜工具箱之父.game-container{position:relative;width:100vw;height:100vh;background-color:#000;}.game-canvas{width:100%;height:100%;}/*游戏信息样式*/.game-info{position:absolute;top:40rpx;left:40rpx;right:40
  • web第三次作业 naodianbozzz 前端cssjavascript
    实现网页登入窗口的显示隐藏登录窗口滑动效果*{margin:0;padding:0;box-sizing:border-box;}html,body{width:100%;height:100%;}.container{width:100%;height:100%;background-color:#f2f1f2;}header{width:1200px;height:50px;backgroun
  • 前端知识速记--css篇：CSS3中的常见动画及实现方式 无限大. #前端知识速记前端csscss3
    前端知识速记–css篇：CSS3中的常见动画及实现方式常见的CSS3动画1.过渡(Transitions)过渡是一种非常简单的动画效果，允许你在元素的状态变更时平滑过渡到新状态。语法格式：transition:propertydurationtiming-functiondelay;property：指定要过渡的CSS属性，例如background-color。duration：过渡的持续时间，例
  • 微信小程序画布canvas（新版）实现签名功能 阿成℡ 小程序微信小程序小程序前端
    wxml文件:新版使用id获取canvas组件即可，旧版需要使用canvas-id。wxss文件：/*pages/signature/signature.wxss*/.container{padding:20rpx;height:100vh;width:100vw;overflow:hidden;display:flex;align-items:center;/*background:radial
  • 【element】谷歌浏览器 el-dialog 概率出现背景全黑，透明度不生效 丶思想 vuevue.jsjavascript前端
    项目场景：谷歌浏览器问题描述谷歌浏览器el-dialog概率出现背景全黑，透明度不生效classv-modalopacity:0.5不生效解决方案：采用opacity:1background:0.5透明度的黑色代码如下：importVuefrom'vue'importElementfrom'element-ui'import'../element-variables.scss'/***来自Kare
  • 使用 HTML CSS 和 JAVASCRIPT 的黑洞动画 谏君之 javascriptcsshtmljavascript
    使用HTMLCSS和JAVASCRIPT的黑洞动画BlackHoleAnimationbody{margin:0;overflow:hidden;background:radial-gradient(ellipseatcenter,black,#1a1a1a);height:100vh;display:flex;justify-content:center;align-items:center;}
  • qt 使用qss控制界面外观 yaofei2006 qt开发语言ui
    在Qt中，QSS（QtStyleSheets）是一种基于CSS（CascadingStyleSheets）的样式表语言，用于自定义Qt应用程序的外观。通过QSS，你可以轻松地修改控件的颜色、字体、边框、背景等属性，而无需修改代码。以下是使用QSS的详细指南：1.基本语法QSS的语法与CSS类似，由选择器和声明块组成：选择器{属性:值;属性:值;}示例QPushButton{background-c
  • 微信小程序设置button禁用时的样式disabled 代码简单说 css小程序小程序css
    /*设置不可用状态的背景色*/button[disabled]{background-color:#ccc;}
  • 【CSS进阶】CSS元素的水平、垂直居中方法 Bl_a_ck html与css进阶css前端javascripthtml5bootstrapcss3less
    在前端开发中，实现水平居中和垂直居中是常见的需求。不同的HTML元素（块级元素、行内元素、行内块元素）以及不同的布局方式（传统布局、Flexbox、Grid、绝对定位）会有不同的居中方法。以下是各类居中方式的总结：1.水平居中（HorizontalCentering）1.1图片水平居中方法1：background-position当使用background-image设置背景图片时，可以通过bac
  • 按钮的“禁用”样式 wangbinXMU 前端DOMcss
    有时由于需要，需要将自己写的按钮禁用如：保存css:.save{display:block;width:50px;height:50px;line-height:50px;border-radius:100%;background:blue;color:#fff;text-align:center;}显示为：要是input和button做的按钮，当然采用disabled属性即可解决；要是自定义的按
  • go 语言设置 商城首页 Go的神秘男朋友 golang开发语言后端
    1：前端传递的数据结构:{"page_type":10,"page_name":"商城首页","page_data":{"page":{"params":{"name":"商城首页","title":"萤火商城2.0","shareTitle":"分享标题"},"style":{"titleTextColor":"black","titleBackgroundColor":"#ffffff"},"
  • web第二次作业 mbx0715 tensorflow人工智能python
    一、小鹅通首页开发二、代码：index.html:小鹅通-首页style.css:*{margin:0;padding:0;box-sizing:border-box;}html,body{width:100%;height:100%;font-family:"微软雅黑";font-size:16px;}index.css:.bg{width:100%;}.header{background-im
  • Web第三次作业 mbx0715 css前端css3
    Document*{margin:0;padding:0;box-sizing:border-box;}html,body{width:100%;height:100%;}.container{width:100%;height:100%;background-color:#f2f1f2;}header{width:1200px;height:50px;background-color:#fff;
  • html制作大白,怎样用HTML和CSS做出大白？ 张竞扬 摩尔精英 html制作大白
    您最好对HTML和CSS有一定的了解HTML代码背景颜色为灰色或者黑色，更容易衬托出大白body{background:#595959;}#baymax{/*设置为居中*/margin:0auto;/*高度*/height:600px;/*隐藏溢出*/overflow:hidden;}#head{height:64px;width:100px;/*以百分比定义圆角的形状*/border-radiu
  • 看到别人用css3写的baymax ，大白，挺萌的 a_water_drop
    http://www.w3cfuns.com/blog-5455933-5404334.html这是作者博客，转载和使用请标明。无标题文档*{margin:0;padding:0;}body{background:#999;}.Baymax{width:300px;height:600px;margin:20pxautoautoauto;position:relative;}.head{width
  • 鸿蒙开发：组件样式的复用
    前言我们先看一段简单的代码，可以看看发现有什么问题。@Entry@ComponentstructIndex{build(){Column(){Text("1").width(50).height(50).backgroundColor(Color.Red).margin({top:10})Text("2").width(50).height(50).backgroundColor(Color.Re
  • SPA 收入支出/技师提成自动统计系统——东方仙盟 未来之窗软件服务 csscss3html
    代码body{font-family:Arial,sans-serif;}h2{margin-top:20px;}.tabs{display:flex;}.tab{padding:10px20px;background-color:#f1f1f1;cursor:pointer;}.tab.active{background-color:#ddd;border-top:1pxsolidred;bor
  • wiredtiger java_mongodb数据库损坏，丢失WiredTIger.wt等meta文件，通过collection*.wt恢复数据... 又逢账号起名时 wiredtigerjava
    mongodb恢复wiredtiger数据Backgroundmongodb是一款开源NoSQL非关系型数据库，通过database,collection组织存储数据文件，其中在每个collection中，每条数据被存储为一个document，而每个document为一组键值对。此外，mongodb默认使用WiredTiger作为数据存储引擎，WiredTiger为数据管理提供了不同粒度的并发控制
  • QT QTableWidget 表头样式设置 Tsai时越 QTGUI控件
    QHeaderView::section{border:2pxgroovegray;border-radius:10px;padding:2px4px;background-color:#1296db;color:#ffffff;}效果：
  • QTableWidget样式设置 季截 qt前端javascripthtml
    QHeaderView::section{font-family:思源黑体;font-size:28px;font-weight:500;color:#054578;}QLineEdit:hover{border:1pxsolid#298DFF;border-radius:3px;background-color:#F2F2F2;color:#298DFF;selection-background
  • 在vue中根据devicePixelRatio处理多倍图(less) Kyrossssssss Vue
    在vue中根据devicePixelRatio处理多倍图(less)devicePixelRatio为设备物理像素和设备独立像素的比例，在不同的机型上有2倍图和三倍图之分，比如p8和p8plus就是一个二倍一个三倍。在less中的处理.bg-image(@url){background-image:e(%("url(~@/assets/images/%[email protected])",e(@url)));@m
  • canvas实现贪吃蛇 田本初 JavaScriptcss前端javascript
    Canvas贪吃蛇canvas{border:2pxsolid#333;}#controlPanel{margin:10px0;display:flex;gap:10px;}button{padding:8px16px;font-size:16px;cursor:pointer;background:#4CAF50;color:white;border:none;border-radius:4px
  • javascript网页设计案例 咚微灯 javascript
    案例：动态任务列表（To-DoList）用户可以添加任务、标记任务为完成状态，并删除任务。1.HTML结构任务列表我的任务列表添加任务2.CSS样式（styles.css）body{font-family:Arial,sans-serif;background-color:#f4f4f4;margin:0;padding:0;display:flex;justify-content:center;
  • web第三次作业 unfeeling_ 前端cssjavascript
    一、要实现的内容：使用JS实一个网页中登录窗口的显示/隐藏，页面中拖动移动，并且添加了边界判断的网页效果二、代码展示Document*{margin:0;padding:0;box-sizing:border-box;}html,body{width:100%;height:100%;}.container{width:100%;height:100%;background-color:#f2f1
  • Web前端第三次作业 shayell 前端
    1.学校官网（1）相关信息学校官网-相关信息body{font-family:Arial,sans-serif;}.header{background-color:#4CAF50;color:white;padding:10px;text-align:center;}.nav{overflow:hidden;background-color:#333;}.nava{float:left;displ
  • HarmonyOS第一课第四章习题答案 喊我小垚女 鸿蒙harmonyos华为鸿蒙鸿蒙系统
    应用程序框架基础判断题1.在基于Stage模型开发的应用项目中都存在一个app.json5配置文件、以及一个或多个module.json5配置文件。答案：对2.一个应用只可以包含一个UIAbility组件。答案：错误3.Background状态在UIAbility实例销毁时触发。可以在onDestroy()回调中进行系统资源的释放、数据的保存等操作。答案：错误单选题1.关于module.json5
  • Java可视化界面 Justice link javapython开发语言
    一。使用JFrame（创建窗口）JDialog（创建新窗口）    //1.创建一个窗口对象JFrameframe=newJFrame("一个文件");//2.创建一个容器Containercontainer=frame.getContentPane();//3.为容器添加颜色container.setBackground(Color.gray);//4.为窗口设置大小窗口frame.setBou
  • getUserMedia 获取相机信息
    js获取相机信息，并输出到video，同时绘制到canvas上，功能实现如下：Demobody{margin:0;}.container{height:150px;background:#f4f4f4;}input{margin:20px;display:inline-block;}video{position:fixed;top:30%;left:50%;transform:translate(
  • 关于旗正规则引擎下载页面需要弹窗保存到本地目录的问题 何必如此 jsp超链接文件下载窗口
    生成下载页面是需要选择“录入提交页面”，生成之后默认的下载页面<a>标签超链接为：<a href="<%=root_stimage%>stimage/image.jsp?filename=<%=strfile234%>&attachname=<%=java.net.URLEncoder.encode(file234filesourc
  • 【Spark九十八】Standalone Cluster Mode下的资源调度源代码分析 bit1129 cluster
    在分析源代码之前，首先对Standalone Cluster Mode的资源调度有一个基本的认识： 首先，运行一个Application需要Driver进程和一组Executor进程。在Standalone Cluster Mode下，Driver和Executor都是在Master的监护下给Worker发消息创建(Driver进程和Executor进程都需要分配内存和CPU，这就需要Maste
  • linux上独立安装部署spark daizj linux安装spark1.4部署
    下面讲一下linux上安装spark，以 Standalone Mode 安装   1）首先安装JDK   下载JDK：jdk-7u79-linux-x64.tar.gz  ，版本是1.7以上都行，解压 tar -zxvf jdk-7u79-linux-x64.tar.gz     然后配置 ~/.bashrc&nb
  • Java 字节码之解析一 周凡杨 java字节码javap
        一： Java 字节代码的组织形式   类文件 {     OxCAFEBABE ，小版本号，大版本号，常量池大小，常量池数组，访问控制标记，当前类信息，父类信息，实现的接口个数，实现的接口信息数组，域个数，域信息数组，方法个数，方法信息数组，属性个数，属性信息数组 } &nbs
  • java各种小工具代码 g21121 java
    1.数组转换成List import java.util.Arrays; Arrays.asList(Object[] obj); 2.判断一个String型是否有值 import org.springframework.util.StringUtils; if (StringUtils.hasText(str)) 3.判断一个List是否有值 import org.spring
  • 加快FineReport报表设计的几个心得体会 老A不折腾 finereport
    一、从远程服务器大批量取数进行表样设计时，最好按“列顺序”取一个“空的SQL语句”，这样可提高设计速度。否则每次设计时模板均要从远程读取数据，速度相当慢！！ 二、找一个富文本编辑软件（如NOTEPAD+）编辑SQL语句，这样会很好地检查语法。有时候带参数较多检查语法复杂时，结合FineReport中生成的日志，再找一个第三方数据库访问软件（如PL/SQL）进行数据检索，可以很快定位语法错误。
  • mysql linux启动与停止 墙头上一根草
    如何启动/停止/重启MySQL一、启动方式1、使用 service 启动：service mysqld start2、使用 mysqld 脚本启动：/etc/inint.d/mysqld start3、使用 safe_mysqld 启动：safe_mysqld&二、停止1、使用 service 启动：service mysqld stop2、使用 mysqld 脚本启动：/etc/inin
  • Spring中事务管理浅谈 aijuans spring事务管理
    Spring中事务管理浅谈 By Tony Jiang@2012-1-20 Spring中对事务的声明式管理 拿一个XML举例 [html]  view plain copy print ? <?xml version="1.0" encoding="UTF-8"?>&nb
  • php中隐形字符65279（utf-8的BOM头）问题 alxw4616
    php中隐形字符65279（utf-8的BOM头）问题 今天遇到一个问题. php输出JSON 前端在解析时发生问题:parsererror.   调试: 1.仔细对比字符串发现字符串拼写正确.怀疑是 非打印字符的问题. 2.逐一将字符串还原为unicode编码. 发现在字符串头的位置出现了一个 65279的非打印字符.        
  • 调用对象是否需要传递对象(初学者一定要注意这个问题) 百合不是茶 对象的传递与调用技巧
        类和对象的简单的复习,在做项目的过程中有时候不知道怎样来调用类创建的对象,简单的几个类可以看清楚,一般在项目中创建十几个类往往就不知道怎么来看   为了以后能够看清楚,现在来回顾一下类和对象的创建,对象的调用和传递(前面写过一篇)   类和对象的基础概念:   JAVA中万事万物都是类 类有字段(属性),方法,嵌套类和嵌套接
  • JDK1.5 AtomicLong实例 bijian1013 javathreadjava多线程AtomicLong
    JDK1.5 AtomicLong实例 类 AtomicLong 可以用原子方式更新的 long 值。有关原子变量属性的描述，请参阅 java.util.concurrent.atomic 包规范。AtomicLong 可用在应用程序中（如以原子方式增加的序列号），并且不能用于替换 Long。但是，此类确实扩展了 Number，允许那些处理基于数字类的工具和实用工具进行统一访问。  
  • 自定义的RPC的Java实现 bijian1013 javarpc
            网上看到纯java实现的RPC，很不错。         RPC的全名Remote Process Call，即远程过程调用。使用RPC，可以像使用本地的程序一样使用远程服务器上的程序。下面是一个简单的RPC 调用实例，从中可以看到RPC如何
  • 【RPC框架Hessian一】Hessian RPC Hello World bit1129 Hello world
    什么是Hessian The Hessian binary web service protocol makes web services usable without requiring a large framework, and without learning yet another alphabet soup of protocols. Because it is a binary p
  • 【Spark九十五】Spark Shell操作Spark SQL bit1129 shell
    在Spark Shell上，通过创建HiveContext可以直接进行Hive操作   1. 操作Hive中已存在的表   [hadoop@hadoop bin]$ ./spark-shell Spark assembly has been built with Hive, including Datanucleus jars on classpath Welcom
  • F5　往header加入客户端的ip ronin47
    when HTTP_RESPONSE {if {[HTTP::is_redirect]}{         HTTP::header replace Location [string map {:port/ /} [HTTP::header value Location]]HTTP::header replace Lo
  • java-61-在数组中，数字减去它右边(注意是右边)的数字得到一个数对之差. 求所有数对之差的最大值。例如在数组{2, 4, 1, 16, 7, 5, bylijinnan java
    思路来自： http://zhedahht.blog.163.com/blog/static/2541117420116135376632/ 写了个java版的 public class GreatestLeftRightDiff { /** * Q61.在数组中，数字减去它右边(注意是右边)的数字得到一个数对之差。 * 求所有数对之差的最大值。例如在数组
  • mongoDB 索引 开窍的石头 mongoDB索引
    在这一节中我们讲讲在mongo中如何创建索引       得到当前查询的索引信息      db.user.find(_id:12).explain();        cursor: basicCoursor 指的是没有索引  &
  • [硬件和系统]迎峰度夏 comsci 系统
      从这几天的气温来看，今年夏天的高温天气可能会维持在一个比较长的时间内    所以，从现在开始准备渡过炎热的夏天。。。。    每间房屋要有一个落地电风扇，一个空调(空调的功率和房间的面积有密切的关系)    坐的，躺的地方要有凉垫，床上要有凉席       电脑的机箱
  • 基于ThinkPHP开发的公司官网 cuiyadll 行业系统
    后端基于ThinkPHP，前端基于jQuery和BootstrapCo.MZ 企业系统 轻量级企业网站管理系统 运行环境:PHP5.3+, MySQL5.0 系统预览 系统下载：http://www.tecmz.com 预览地址：http://co.tecmz.com 各种设备自适应 响应式的网站设计能够对用户产生友好度，并且对于
  • Transaction and redelivery in JMS (JMS的事务和失败消息重发机制) darrenzhu jms事务承认MQacknowledge
    JMS Message Delivery Reliability and Acknowledgement Patterns http://wso2.com/library/articles/2013/01/jms-message-delivery-reliability-acknowledgement-patterns/ Transaction and redelivery in
  • Centos添加硬盘完全教程 dcj3sjt126com linuxcentoshardware
    Linux的硬盘识别: sda        表示第1块SCSI硬盘 hda       表示第1块IDE硬盘 scd0      表示第1个USB光驱 一般使用“fdisk -l”命
  • yii2 restful web服务路由 dcj3sjt126com PHPyii2
    路由 随着资源和控制器类准备，您可以使用URL如 http://localhost/index.php?r=user/create访问资源，类似于你可以用正常的Web应用程序做法。 在实践中，你通常要用美观的URL并采取有优势的HTTP动词。 例如，请求POST /users意味着访问user/create动作。 这可以很容易地通过配置urlManager应用程序组件来完成 如下所示
  • MongoDB查询(4)——游标和分页[八] eksliang mongodbMongoDB游标MongoDB深分页
    转载请出自出处：http://eksliang.iteye.com/blog/2177567 一、游标         数据库使用游标返回find的执行结果。客户端对游标的实现通常能够对最终结果进行有效控制，从shell中定义一个游标非常简单，就是将查询结果分配给一个变量（用var声明的变量就是局部变量），便创建了一个游标，如下所示： > var
  • Activity的四种启动模式和onNewIntent() gundumw100 android
    Android中Activity启动模式详解 　　在Android中每个界面都是一个Activity，切换界面操作其实是多个不同Activity之间的实例化操作。在Android中Activity的启动模式决定了Activity的启动运行方式。 　　Android总Activity的启动模式分为四种： Activity启动模式设置： <acti
  • 攻城狮送女友的CSS3生日蛋糕 ini htmlWebhtml5csscss3
    在线预览：http://keleyi.com/keleyi/phtml/html5/29.htm   代码如下：   <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>攻城狮送女友的CSS3生日蛋糕-柯乐义<
  • 读源码学Servlet（1）GenericServlet 源码分析 jzinfo tomcatWebservlet网络应用网络协议
    Servlet API的核心就是javax.servlet.Servlet接口，所有的Servlet 类（抽象的或者自己写的）都必须实现这个接口。在Servlet接口中定义了5个方法，其中有3个方法是由Servlet 容器在Servlet的生命周期的不同阶段来调用的特定方法。     先看javax.servlet.servlet接口源码：  package
  • JAVA进阶：VO(DTO)与PO(DAO)之间的转换 snoopy7713 javaVOHibernatepo
      PO即 Persistence Object　　VO即 Value Object 　VO和PO的主要区别在于：　　VO是独立的Java Object。　　PO是由Hibernate纳入其实体容器（Entity Map）的对象，它代表了与数据库中某条记录对应的Hibernate实体，PO的变化在事务提交时将反应到实际数据库中。 　实际上，这个VO被用作Data Transfer
  • mongodb group by date 聚合查询日期 统计每天数据（信息量） qiaolevip 每天进步一点点学习永无止境mongodb纵观千象
    /* 1 */ { "_id" : ObjectId("557ac1e2153c43c320393d9d"), "msgType" : "text", "sendTime" : ISODate("2015-06-12T11:26:26.000Z")
  • java之18天 常用的类(一) Luob. MathDateSystemRuntimeRundom
    System类 import java.util.Properties; /** * System: * out:标准输出,默认是控制台 * in:标准输入,默认是键盘 * * 描述系统的一些信息 * 获取系统的属性信息:Properties getProperties(); * * * */ public class Sy
  • maven wuai maven
    1、安装maven：解压缩、添加M2_HOME、添加环境变量path 2、创建maven_home文件夹，创建项目mvn_ch01,在其下面建立src、pom.xml，在src下面简历main、test、main下面建立java文件夹 3、编写类，在java文件夹下面依照类的包逐层创建文件夹，将此类放入最后一级文件夹 4、进入mvn_ch01 4.1、mvn compile ,执行后会在
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他