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. [Netty 1] 初识Netty

    1. 简介 最早接触netty是在阅读Zookeeper源码的时候,后来看到Storm的消息传输层也由ZMQ转为Netty,所以决心好好来研究和学习一下netty这个框架. Netty项目地址:htt ...

  2. spring3+hibernate3+（dbcp+oracle+拦截器事务配置）整合（一）

    1.applicationContext-base.xml文件 <?xml version="1.0" encoding="UTF-8"?>< ...

  3. python 求MD5值

    (一)求字符串的MD5值 import hashlib #导入功能模块,此模块有MD5,SHA1,SHA256等方法 m = hashlib.md5() #声明一个对象 m.update(b'hell ...

  4. dreamweaver批量去除空格，空行

    制作网店的时候,发现有空行,或者空格.如果数量比较少,可以手动清除.如果多的话,可以使用dreamweaver批量去除.方法如下: 第一步,用正则表达式删除所有空白行(其实这一步不一定要做,我只是为了 ...

  5. table列等宽

    固定table列等宽 固定table列等宽 style: {table-layout : fixed} html: style="table-layout:fixed" js: o ...

  6. Keil C51汉字显示的bug问题(0xFD问题)

    一.缘起 这两天改进MCU的液晶显示方法,采用“即编即显”的思路,编写了一个可以直接显示字符串的程序.如程序调用disstr("我是你老爸");液晶屏上就会显示“我是你老爸”. 二 ...

  7. 从C++到Qt（命令行编译，讲解原理）

    Qt 是 C++ 的库,Qt 在 ansi C++ 的基础上进行了一点扩展. 但国内似乎比较浮躁,学Qt的很多连基本的C++如何编译似乎都不太清楚.本文舍弃IDE或qmake.cmake等工具的束缚, ...

  8. cf478B Random Teams

    B. Random Teams time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  9. AngularJS中文介绍

    简介   AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小 ...

  10. PHP伪静态与短链接

    如今,Web服务高速发展的时代,各式各类的门户网站,如新浪http://www.sina.com.腾讯http://www.qq.com,这些网站大家都很容易记住,因为这种名称都是有规则和含义的.如果 ...