<!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. 一个高性能异步socket封装库的实现思路 （c#）

    前言 socket是软件之间通讯最常用的一种方式.c#实现socket通讯有很多中方法,其中效率最高就是异步通讯. 异步通讯实际是利用windows完成端口(IOCP)来处理的,关于完成端口实现原理, ...

  2. excel vlookup

    今天在百度知道的时候,看到旁边有人问excel中条件查找vlookup的问题,有几位高手都知道使用vlookup作答,可惜都是没有经过测试,直接复制别人的答案,让所有的读者都无法实施,一头雾水.今天我 ...

  3. vscode调试html页面，及配置说明

    一.效果目的 1.在VSCode里,直接F5打开html页面,并且可以在编辑器里,进行断点调试js代码: 二.工具准备 1.VSCode 软件 2.一个js项目 3.VSCode 上装一个插件:Deb ...

  4. Android APK反编译 apktool使用教程

    2017年棋牌游戏突然就火了,正所谓春江水暖鸭先知本猿处在软件行业中就能清晰的感受到市场的变化,最近老家那边也是玩的风生水起,于是最近闲暇时光想到反编译下这些棋牌软件,看看代码实现的思路 (注:反编译 ...

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

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

  6. nginx+tomcat安装配置

    nginx+tomcat安装配置 # nginx+tomcat安装配置 #创建网站目录 mkdir -p /www/wwwroot cd /www #安装配置 wget http://mirrors. ...

  7. 五十个小技巧提高PHP执行效率(二)

    更详细具体的总结如下: 1.用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量, 单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的 ...

  8. 手动安装Nginx

    本分类下有一个环境一键安装.那这背后发生了什么呢?咱们手动使用源码进行安装.1.首先保证有一个能联网的centos.2.百度 ningx 官网   点download  http://nginx.or ...

  9. linux系统下安装配置解压版的MySQL数据库

    一.解压文件到当前目录 命令:tar -zxvf mysql....tar.gz 二.移动解压完成的文件夹到目标目录并更名mysql 命令:mv mysql-版本号 /usr/local/mysql ...

  10. kubernetes nginx ingress 使用记录

    前言 ingress是一种可以暴露k8s集群内部service的方式,用户编辑配置文件定义一个ingress资源即可实现外部网络访问内网service. ingress controller是来管理所 ...