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. 实现div中图片的滚动

    今日闲来无事自己写了个图片滚动: 源码: <html><head> <meta charset="utf-8"/> <script typ ...

  2. （原+转）pycharm中使用caffe

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5896446.html 参考网址: http://www.th7.cn/Program/Python/2 ...

  3. （原）vs2013编译boost1.60库

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5394236.html 参考网址: http://www.cnblogs.com/chuncn/arch ...

  4. css派生选择器

    后代选择器:即包含选择器,选择某元素的后代元素. 子元素选择器:只能选择某元素的子元素. 相邻兄弟选择器:可选择紧接在另一个元素后的元素,且两者有相同的夫元素.

  5. OER 7451 in Load Indicator : Error Code = OSD-04500:指定了非法选项

    alert 日志错误OER 7451 in Load Indicator : Error Code = OSD-04500:指定了非法选项 Sun Apr 22 11:15:51 2012 OER 7 ...

  6. WSGI的理解

    Python web开发中,服务端程序可分为2个部分: 服务器程序(用来接收.整理客户端发送的请求) 应用程序(处理服务器程序传递过来的请求) 在开发应用程序的时候,我们会把常用的功能封装起来,成为各 ...

  7. Django1.7官方文档中的tutorial——翻译

    写下你的第一个Django应用,第一部分 让我们通过例子来学习. 通过这篇指南,我们将会带你浏览一遍一个基本投票应用的创建. 它由两部分组成: 1一个让人们查看投票和进行投票的公共站点 2一个让你添加 ...

  8. jquery.fn.extend与jquery.extend（转）

    jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend( ...

  9. Effective Java2读书笔记-创建和销毁对象（二）

    第3条:用私有构造器或者枚举类型强化Singleton属性 这一条,总体来说,就是讲了一个小技巧,将构造器声明为private,可以实现单例.具体有以下几种实现的方式. ①最传统的单例实现模式,可能有 ...

  10. SQL Server 2008空间数据应用系列四：基础空间对象与函数应用

    原文:SQL Server 2008空间数据应用系列四:基础空间对象与函数应用 友情提示,您阅读本篇博文的先决条件如下: 1.本文示例基于Microsoft SQL Server 2008 R2调测. ...