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属性的更多相关文章

  1. css一个div设置多个背景图片

    html:定义一个div <div class="item__content"></div> css:样式 .item__content { positio ...

  2. CSS3设置多张背景图片

    background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");background-rep ...

  3. 一个div添加多个背景图片

    效果图如下:

  4. 给div设置background-color: rgba(0, 0, 0, 0.2)属性，并加了css3动画--opacity动画淡出动画，之后div子元素的字体会抖一下

    问题:给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下: 解决:animati ...

  5. 关于设置UITableView的背景图片

    在UITableViewController中,要设置UITableView的背景图片,以前常用的方法是使用backgroundcolor属性,这个属性可以通过UIImage来获取,但最近发现这个方法 ...

  6. WPF 后台C#设置控件背景图片

    原文:WPF 后台C#设置控件背景图片 以前的程序中有做过,当时只是记得uri很长一大段就没怎么记.今天有人问了也就写下来.   这是一个Button,设置了Background后的效果. 前台的设置 ...

  7. IntelliJ IDEA设置主题和背景图片(背景色)

    设置主题以及背景图片 设置代码背景颜色

  8. CSS3利用一个div实现内圆角边框效果

    *首先要清楚的是,box-shadow的形状会随着border-radius变化.下面的例子可以证明: <!doctype html> <html lang="en&quo ...

  9. css2如何设置全屏背景图片

    每次在做一个网站后台登陆页面的时候,当UI给我一张背景是不规律的背景图片,但是在设置为背景时,总会遇到屏幕大小的问题,导致背景图片有可能平铺.这样UI的效果达不到也会很难看. 本来我想用body{ba ...

随机推荐

  1. （原）caffe中fine tuning及使用snapshot时的sh命令

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5946041.html 参考网址: http://caffe.berkeleyvision.org/tu ...

  2. CSS3实现时间表

    一直想学CSS3,今天别的论坛看到的例子,挺好,mark起来以后自己看. <!doctype html> <html> <head> <meta charse ...

  3. SQL Server 本地时间和UTC时间的相互转换的代码

    DECLARE @LocalDate DATETIME, @UTCDate DATETIME, @LocalDate2 DATETIME   SET @LocalDate = GETDATE() SE ...

  4. connectionStrings基本配置

    常用connectionStrings配置: <connectionStrings>   <add       name="LocalSqlServer"     ...

  5. python----特性002

    python特性002:特性是可继承的 #!/usr/local/python3.5/bin/python3 class Person(object): def __init__(self,name) ...

  6. Typecho 代码阅读笔记（二） - 数据库访问

    转载请注明出处:http://blog.csdn.net/jh_zzz 这一块比较复杂,我还没有完全理解为什么要把 SQL 语句的组装搞这么复杂. 从一个普通皮肤页面开始 themes/default ...

  7. MyEclipse6.5安装SVN插件的三种方法

    MyEclipse6.5安装SVN插件的三种方法 方法一.如果可以上网可在线安装 1. 打开Myeclipse,在菜单栏中选择Help→Software Updates→Find and Instal ...

  8. Windows多线程同步系列之二-----关键区

    关键区对象为:CRITICAL_SECTION 当某个线程进入关键区之后,其他线程将阻塞等待,知道该线程释放关键区的拥有权. 关键区同步主要有以下几个API 初始化关键区对象,无返回值,传入一个关键区 ...

  9. JOB+MERGE 跨服务器同步数据

    为了解决单服务器压力,将库分服务器部署,但是原来用触发器实现的表数据同步就实现不了了. 因为总监老大不允许 开启分布式事务(MSDTC),我又不想为了一个几千行的基础数据做复制订阅. 于是乎决定用 J ...

  10. [置顶] 教你如何搭建RobotFramework环境

    看到这篇文章的朋友,相信已经知道RobotFramework是干什么的了,我这里就不再赘述了. 搭建步骤: 1. 下载安装Python,下载地址http://www.python.org/getit/ ...