<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <div>中国</div>

     <div id="div2"></div>

     <img src="img/草5.jpg">

     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

     让屏幕超过一屏产生滚动条。

 </body>

 </html>
 div{

     width: 100px;

     height: 100px;

     /*background: red url(img/鱼2.jpg) repeat-x;*/

     /*background-color: green;*/

     background-image: url(img/鱼2.jpg);

     background-repeat: ;/*设置图片如何重复：默认repeat，可设no-repeat，repeat-x，repeat-y，round*/

     background-position: ;/*此属性要求background-repeat设置成no-repeat才有效。默认左上，left、rigth、center、bottom、top两两组合使用，若只有一个则第二个值默认为center。x%y%水平垂直位置，0%0%左上，100%100%右下，若只有一个百分值，则另一个默认50%。xy，单位像素或em，0px0px左上，只有一个值只第二个值为50%*/

 }

 body{

     /*background: url(img/草3.jpg) no-repeat;*/

     /*background-attachment: fixed;*//*默认scroll随屏幕一起滚动，可设fixed*/

     background-size: /*500px*//*50%*//*cover*/contain;/*若只设置一个则为宽，高会根据原图比例调整。百分比为背景区别的百分比，非原图的比例缩放。cover保证原图宽高比横竖方向扩充整个背景可能会有某个方向超出区域被切掉；contain保证原图比例，使横竖其中一个扩充到就完成。*/

 }

 #div2{

     width: /*300px*/150px;

     height: /*200px*/100px;

     background: rgba(255,125,0,0.3);

     margin: 50px;

     padding: 60px;

     border: 20px groove rgba(100,30,15,0.5);

     background: url(img/草5.jpg) no-repeat;

     /*background-origin: content-box;*//*border-box左上角对齐到外边框；默认值padding-box左上角对齐到内边框；content-box左上角对齐到内容边框*/

     background-origin: border-box;

     background-clip: content-box;/*默认border-box从外边框开始剪切，外边框内都被保留。一般配合background-origin: border-box容易看出效果，从哪里显示，从哪里裁剪。padding-box从内边框开始裁剪。content-box从内容边框开始裁剪。*/

 }

【CSS3】背景的更多相关文章

  1. CSS3背景温故

    1.背景的五种基本属性background-color(背景颜色)background-image(背景图片)background-repeat(背景图片展示方式)background-attachm ...

  2. css3 背景记

    css3 背景 css背景主要包括五个属性: background-color background-color:transparent || <color> 用来设置元素的背景颜色,默认 ...

  3. CSS自学笔记（11）:CSS3背景和边框

    CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...

  4. 第七十九，CSS3背景渐变效果

    CSS3背景渐变效果 学习要点: 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变. 一．线性渐变 linear-gradi ...

  5. 从零开始学习前端开发 — 17、CSS3背景与渐变

    一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...

  6. css3背景颜色渐变属性 兼容性测试基础环境为：windows系统；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

  7. [转]真正了解CSS3背景下的@font face规则

    本文转自:http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ by zhangxinxu from http:/ ...

  8. css3 背景background

    Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...

  9. CSS3背景 制作导航菜单综合练习题

    CSS3背景 制作导航菜单综合练习题 小伙伴们,根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用 ...

  10. css3-3 css3背景样式

    css3-3 css3背景样式 一.总结 一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...

随机推荐

  1. 重写Fields 控制models 数据输出字段

    models: public function Fields() { $fields = parent::Fields();//原来models输出字段 $fields['parentComment' ...

  2. postman 时间戳和加密

    在使用postman进行接口测试的时候,对于有些接口字段需要时间戳加密,这个时候我们就遇到2个问题,其一是接口中的时间戳如何得到?其二就是对于现在常用的md5加密操作如何在postman中使用代码实现 ...

  3. AndroidStudio中各种常见快捷键记录

    AndroidStudio中各种常用操作快捷键记录 简单方法 直接设置AS的快捷键与eclipse相同,方便直接从eclipse切到AS的人. 常用的AS的默认快捷键 ctrl + N 根据类名查找J ...

  4. 13. ZooKeeper最佳实践

    以下列举了运行和管理ZooKeeper ensemble的一些最佳实践: ZooKeeper数据目录包含快照和事务日志文件.如果autopurge选项未启用,定期清理目录是一个好习惯.另外,管理员可能 ...

  5. Mysql--单表数据记录查询

    1.简单数据记录查询 1.1 简单数据查询 1.1.1 查询所有字段数据 例子:      1.1.2 "*"符号的使用 语法: 例子: 1.1.3 查询指定字段数据 例子:   ...

  6. Servlet，JSP 中的中文乱码问题以及解决方案

    问题描述: 在Servlet,JSP 传递数据中,英文无影响,而中文有时候就会出现乱码. 解决方案: 相同的编码: 同一个项目中的每个文件应当设置和保存相同的编码方式,如: html中 <met ...

  7. 一个非常好用的图片切割工具（c# winform开发） 附源码

    本人业余时间开发了一个图片切割工具,非常好用,也很灵活! 特别对大型图片切割,更能体现出该软件的优势! 开发工具为winform,源码下载地址:http://download.csdn.net/dow ...

  8. wkwebview加载本地html的要点

    项目中有些页面,我采用了html页面开发,然后用wkwebview加载的设计.在加载过程中遇见了一些问题,在这里进行一些记载和讨论.如有不同意见欢迎进行评论沟通. 问题时候这样的: 在webview的 ...

  9. python 抓取金融数据，pandas进行数据分析并可视化系列 (一)

    终于盼来了不是前言部分的前言,相当于杂谈,算得上闲扯,我觉得很多东西都是在闲扯中感悟的,比如需求这东西,一个人只有跟自己沟通好了,总结出某些东西了,才能更好的和别人去聊,去说. 今天这篇写的是明白需求 ...

  10. python使用rsa库做公钥解密(网上别处找不到)

    使用RSA公钥解密,用openssl命令就是openssl rsautl -verify -in cipher_text -inkey public.pem -pubin -out clear_tex ...