（background-clip裁剪,background-position位置,background-origin定位,background-repeat是否重复）

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>表格</title>

    <style type="text/css">

        .class1{

            width: 400px;

            height: 550px;

            border-style: groove;

            border-color: rgba(235,198,118,0.6);

            border-width: 10px;

            padding: 30px;

            background-image: url(../image/img2.jpg),url(../image/img3.jpg),url(../image/img4.jpg);

            background-repeat: no-repeat,no-repeat,repeat;/*背景图片不重复*/

            background-position: top left,bottom right,top center;/*右下背景图片的位置*/

            background-origin: border-box,padding-box,content-box;/*左上背景图片的定位*/

            background-clip: border-box,padding-box,content-box; /*中间背景图片裁剪*/

        }

        p{

            font-size: 20px;

            text-indent: 2em;/*首行缩进2个字符*/

            line-height: 28px;

            padding-top: 12px;

        }

    </style>

</head>

<body>

    <div class="class1">

        <p>大家好。这是一个css3添加背景图片的小案例。需要注意的是：1.在添加多个背景的时候，底层的背景图要放在最后面。2，多个背景之间的属性用逗号分割。</p>

    </div>

</body>

</html>

3.css3中多个背景图片的用法的更多相关文章

  1. 网页中PNG透明背景图片的完美应用

    PNG 图片在网站设计中是不可或缺的部分,最大的特点应该在于 PNG 可以无损压缩,而且还可以设置透明,对于增强网站的图片色彩效果有重要的作用. 但为什么 PNG 图片却没有 GIF 和 JPG 图片 ...

  2. vue打包后CSS中引用的背景图片不显示问题

    vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件 修改成为如下所示内容:  添加红框中的内容即 ...

  3. IOS 在IOS6中设置navigationBar背景图片 会有一条 黑色阴影 --- 解决方案

    //给navigationBar设置背景图片 if ([self.navigationController.navigationBar respondsToSelector:@selector(set ...

  4. android中的selector背景选择器的用法

    关于listview和button都要改变android原来控件的背景,在网上查找了一些资料不是很全,所以现在总结一下android的selector的用法. 首先android的selector是在 ...

  5. CSS3设置多张背景图片

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

  6. WPF中Button的背景图片，实现禁止IsMouseOver时显示默认

    <Button x:Name="btnPickUpNum" Click="PickUpNum_OnClick" Grid.Row="1" ...

  7. vue在html中写动态背景图片

    <div class="img" :style="`background: url(`+item.img+'?any_string_is_ok'+`)center ...

  8. CSS3中的弹性布局——"em"的用法

    使用CSS也好久了,但一直都是在使用“px”来设置Web元素的相关属性,未敢使用“em”.主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中要求使用“em”作为单位设置元素,所以从 ...

  9. css3中的display：-webkit-box的用法

    一. css weui-media-box__desc { color: #999999; font-size: 13px; line-height: 1.2; overflow: hidden; t ...

随机推荐

  1. sh_08_打印小星星

    sh_08_打印小星星 # 在控制台连续输出五行 *,每一行星号的数量依次递增 # * # ** # *** # **** # ***** # 1. 定义一个计数器变量,从数字1开始,循环会比较方便 ...

  2. sh_03_程序计数

    sh_03_程序计数 # 打印 5 遍 Hello Python # 1. 定义一个整数变量,记录循环次数 i = 0 # 2. 开始循环 while i < 3: # 1> 希望在循环内 ...

  3. 02-scrapy的cmdline命令

    1.启动爬虫的命令为: scrapy crawl spidername(爬虫名) 2.我们还可以通过下述方式来启动爬虫 步骤一:创建一个.py文件.startspider.py(这里文件的名称可以自己 ...

  4. 【转】Django restful framework中自动生成API文档

    转自 https://www.cnblogs.com/sui776265233/p/11350434.html 自动生成api文档(不管是函数视图还是类视图都能显示) 1.安装rest_framewo ...

  5. IntelliJ IDEA2018破解教程

    破解方法:下载破解补丁→修改配置文件→输入激活码→激活成功 由于JetBrains封杀,大部分激活服务器已经不能使用,使用下面的比较麻烦的方法也可以进行破解,但是有效期是到2100年(emmmm,也算 ...

  6. 快速入门分布式消息队列之 RabbitMQ（3）

    目录 目录 前文列表 前言 通道 Channel 一个基本的生产者消费者实现 消费者 生产者 运行结果 应用预取计数 应用 ACK 机制 最后 前文列表 快速入门分布式消息队列之 RabbitMQ(1 ...

  7. 13 oracle数据库坏块-逻辑坏块（模拟/修复）

    13 oracle数据库坏块-逻辑坏块 逻辑数据坏块的场景1)oracle bug也可能导致逻辑坏块的产生. 特别是parallel dml. 例如:Bug 5621677 Logical corru ...

  8. powered by Fernflower decompiler

    About Fernflower Fernflower is the first actually working analytical decompiler for Java and probabl ...

  9. 练习1：python设计停车入库出库系统

    前言: 最近在某个测试群看到有人抛出了一个面试题.为了提升自己的编程能力,我也尝试的用python去写了一下. 语言:python,数据库:sqlite  .菜鸟来袭,只是基本实现功能,可能没有考虑太 ...

  10. IntelliJ IDEA 快捷键终极大全

    自动代码 常用的有fori/sout/psvm+Tab即可生成循环.System.out.main方法等boilerplate样板代码 . 例如要输入for(User user : users)只需输 ...