<!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. Shell 快速指南

    Shell 快速指南 ███████╗██╗ ██╗███████╗██╗ ██╗ ██╔════╝██║ ██║██╔════╝██║ ██║ ███████╗███████║█████╗ ██║ ...

  2. 系统学习DOM事件机制

    本文将从以下几个方面介绍DOM事件: 基本概念:DOM事件的级别 DOM事件模型,事件流 描述DOM事件捕获的具体流程 Event对象的常见应用 自定义事件 DOM事件的级别 //DOM0 eleme ...

  3. Fedora 23建立wifi热点（Android手机可用）

    在ubuntu14.04下使用ap-hotspot,速度还不错.但是在15.04下就用不了了,不知为啥.现在使用fedora23,在学校还是挺需要给手机连wifi的,于是google看看ap-hots ...

  4. SpringMVC 上传下载 异常处理

    SpringMVC 上传下载 异常处理 上一章节对SpringMVC的表单验证进行了详细的介绍,本章节介绍SpringMVC文件的上传和下载(重点),国际化以及异常处理问题.这也是SpringMVC系 ...

  5. socket.io 入门篇（三）

    本文原文地址:https://www.limitcode.com/detail/5926e3a056fba70278bf2044.html 前言 上篇我们介绍了 socket.io 中room的概念和 ...

  6. 如何用while循环输出十行十列变色★☆

    输出十行十列星星 k = 0 #设置一个终止变量 while k < 10: i = 0 #设置一个满十换行变量 while i < 10: print('★',end='') i += ...

  7. [欧拉路径]Play on Words UVA10129

    传送门:   UVA - 10129 题目大意: 给定一些单词(可能会重复出现),判断单词是否能排成一个序列,前提是单词的最后一个字母与下一个单词的第一个字母相同.输出"The door c ...

  8. Python 学习之路3

    接下来把剩下的实验一起写上去 实验2 写一个学生类,属性有学号,姓名,成绩(三门),方法有输出,求平均成绩. 设计思路: 1．         先写一个学生类,并向里面写一个求平均值和输出信息的方法. ...

  9. 《java.util.concurrent 包源码阅读》19 PriorityBlockingQueue

    前面讲ScheduledThreadPoolExecutor曾经重点讲到了DelayedWorkQueue,这里说的PriorityBlockingQueue其实是DelayedWorkQueue的简 ...

  10. css随笔属性

    anchor伪类,用于阅读文章.a:link(没有接触过的链接),用于链接常规状态 (末访问的链接)a:hover(鼠标放在链接上的状态) 用于产生视觉效果(已访问的链接)a:visited(访问过的 ...