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. session问题和JSP

    session问题和JSP 07. 五 / J2EE / 没有评论   一.Session开发中遇到的问题1.内存中的Session非常多,怎么办?2.用户在购物中.服务器停掉了该web应用(或者重新 ...

  2. jQuery常用选择器汇总

    一.基本选择器 <body> <div> <div id="div1"> aaaaaaaaaaa</div> <div cla ...

  3. Glide 加载图片背景变绿

    解决方案: Glide.with(mContext).load(url).diskCacheStrategy(DiskCacheStrategy.SOURCE).into(imageView);

  4. 存储过程使用表变量或临时表代替游标Fetch实例，访问远程数据库

    定义表变量是可以直接操作在内存中的数据,比较快.临时表在大数据量时会比游标使用的资源少.还是要看具体情况了.也有可能在实际优化过程中相互替换呢. 留作记忆的代码如下: if object_id('te ...

  5. PROCEDURE_监测系统_原始数据报表数据生成存储过程—求每天平均值插入多表视图

    create or replace procedure proc_generate_report(in_date in varchar2) is  v_retCode varchar2(20);  v ...

  6. fitness

    大家一定要小心那些有6块腹肌的男人和永远保持好身材的女人 这些人拥有你所想不到的决心和意志力 还要小心那些冬天里 能唰的一下起床的人 他们什么事都能干的.

  7. ajax创建对象

    <script>     function createAjax(){         var request=false;                   //window对象中有X ...

  8. 基于cygwin构建u-boot（二）gcc的C语言标准版本号（-std=）

    接上文,修改Makefile和config.mk中,.depend相关文件格式后继续编译. 四.tools文件夹的文件编译错误 错误告警如下[多行信息,请使用右侧滚动条查看]: gcc -Wall - ...

  9. ES6新特性-------数组、Math和扩展操作符（续）

    三.Array Array对象增加了一些新的静态方法,Array原型上也增加了一些新方法. 1.Array.from 从类数组和可遍历对象中创建Array的实例 类数组对象包括:函数中的argumen ...

  10. Qt浅谈之二十App自动重启及关闭子窗口（六种方法）

    一.简介 最近因项目需求,Qt程序一旦检测到错误,要重新启动,自己是每次关闭主窗口的所有子窗口但有些模态框会出现问题,因此从网上总结了一些知识点,以备以后的应用. 二.详解 1.Qt结构 int ma ...