一.cover的使用

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         div{

             width: 100%;

             height: 360px;

             background-color: #ccc;

             background-image: url("../images/slide_01_2000x410.jpg");

             background-repeat: no-repeat;

             /*让图片居中显示*/

             background-position: center center;

             /*让图片进行缩放*/

             background-size: cover;

         }

     </style>

 </head>

 <body>

 <div></div>

 </body>

 </html>

这个用法能让图片的主体内容显示，而且不失真

二.背景样式

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         div{

             width: 300px;

             height: 300px;

             border: 1px solid #ccc;

             /*设置背景图片:默认会以容器的左上角做为平铺的原点。

             本质上讲，不管图片的大小是否超出容器的范围，默认都会平铺。*/

             background-image: url("../images/share1.png");

             overflow: scroll;

             /*background-image: url("../images/bg-img.jpg");*/

             /*background-repeat: no-repeat;*/

             /*设置背景平铺

             round:会将背景图片进行缩放，来适应容器的大小

             space:并举对背景图片进行缩放，但是也不会让背景图片无法完全显示，会将多余的空间平分(两边没有空间)*/

             /*background-repeat: space;*/

             /*设置背景图片的大小

             length:设置水平和垂直方向的大小，具体的数值，但是这个值的设置有可能造成图片的比例失调，所以在使用这种设置的时候，一定要保证比例的和之前图片一致

             percentage:百分比.参照的是容器--不建议使用*/

             /*background-size: 300px 300px;*/

             /*background-size: 50% 50%;*/

             /*contain:将背景图片全部包含在容器中，它会对背景素材进行等比例缩放.它会造成容器的空白区域*/

             /*background-size: contain;*/

             /*cover:将背景素材完全的覆盖容器*/

             /*background-size: cover;*/

             /*设置背景是否跟随滚动

             fixed:固定背景位置，不让背景跟随滚动

             local:滚动屏幕，会跟随滚动，同时如果在滚动局部的结构块，这个结构块的背景也会跟随滚动

             scroll:滚动屏幕，会跟随滚动，同时如果在滚动局部的结构块，这个结构块的背景不会跟随滚动*/

             background-attachment: local;

         }

     </style>

 </head>

 <body>

 <!--

 背景样式：

 background-color:设置背景色

 background-image:设置背景图片

 background-position:x y   left center right top center bottom

 background-size:length/percent/cover/contain

 background-attachment:设置背景图片跟随滚动 fixed / scroll / local

 background-repeat:设置背景平铺 no-repeat repeat-x repeat-y repeat round space

 background-origin:设置背景图片的填充原点 border-box / padding-box / content-box

 background-clip:设置背景图片的裁切 border-box / padding-box / content-box

 -->

 <div>

     <p style="height:600px;"></p>

 </div>

 <p style="height: 1000px;"></p>

 </body>

 </html>

三.提升响应区域+精灵图的使用

sprites.png

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         a{

             width: 50px;

             height: 50px;

             display: block;

             margin:100px;

             box-sizing: border-box;

             /*border: 10px solid rgba(255,0,0,0.5);*/

             padding:13px;

             /*添加背景*/

             background-image: url("../images/sprites.png");

             /*让背景偏移*/

             background-position: -58px 0;

             /*设置背景图片的填充的参考原点

             border-box:背景从border的区域开始填充,背景和边框区域重叠

             padding-box:背景从padding的区域开始填充,背景和padding区域重叠

             content-box:背景从内容的区域开始填充,背景和内容区域重叠*/

             background-origin: content-box;

             /*设置背景图片的裁切：设置的是裁切，控制的是显示

             content-box：显示content-box的内容，而裁切掉其它的区域的内容

             padding-box：显示padding-box的内容，而裁切掉其它的区域的内容

             border-box：显示border-box的内容，而裁切掉其它的区域的内容*/

             background-clip: content-box;

         }

     </style>

 </head>

 <body>

 <a href="#">

 </a>

 </body>

 </html>

提升鼠标的响应区域：

图中的绿色区域就是响应区域

H5C3--background中cover，背景样式，提升响应区域+精灵图的使用的更多相关文章

  1. 认识CSS中css背景样式设置

    前端之HTML,CSS(五) CSS CSS背景 CSS可以添加背景颜色和背景图片,也可以对图片进行设置.设置的样式有: background-color 背景颜色 background-image ...

  2. css中的段落样式及背景

    一.段落样式 css中关于段落的样式主要有行高,缩进,段落对齐,文字间距,文字溢出,段落换行等.它们的具体语法如下: line-height : normal | length text-indent ...

  3. CSS中如何使用背景样式属性，看这篇文章就够用了

    css背景样式属性介绍 背景样式就是自定义HTML标签的背景颜色或背景图像. 背景属性说明表 属性名 属性值 描述 background-color #f00.red.rgb(255,0,0) 设置背 ...

  4. android:改动PagerTabStrip中的背景颜色，标题字体的样式、颜色和图标以及指示条的颜色

    1.改动PagerTabStrip中的背景颜色 我们在布局中直接设置background属性就可以: <android.support.v4.view.ViewPager android:id= ...

  5. opacity的背景透明&background中rgba的背景色透明

    近期使用css实现了一个loading旋转加载的图片效果,类似gif动画 过程中,需要透明背景,但是图片不要透明 只要背景透明!只要背景透明!只要背景透明! 这里对透明模糊了,两种写法,模糊了 A: ...

  6. android:修改PagerTabStrip中的背景颜色，标题字体的样式、颜色和图标以及指示条的颜色

    1.修改PagerTabStrip中的背景颜色 我们在布局中直接设置background属性即可: <android.support.v4.view.ViewPager android:id=& ...

  7. CSS3初学篇章_5（背景样式/列表样式/过渡动画）

    背景样式 1.背景颜色语法:background-color : transparent | color body { background-color:#CCCCCC;} 2.渐变色彩语法:back ...

  8. CSS常用字体属性(多出的文本隐藏，或者以省略号的形式显示)和背景样式以及背景图的2个不常用属性：background-origin和background-clip

    (一)常用的字体属性: font-weight: 属性值100-900  400等于正常 700等于bold ,数值越大,越粗 font-size:字体大小,单位可以为px或者% font-famil ...

  9. css 背景(background)属性、背景图定位

    background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...

随机推荐

  1. Linux开机、重启和用户登录注销（2）

    1.关机&重启命令 1.1基本介绍 shutdown shutdown -h now :表示立即关机 shutdown -h 1:     表示1分钟后关机 shutdown -r now : ...

  2. BOM相关知识点

    1.BOM概念:Browser Object Model 浏览器对象模型作用:提供了使用JS操作浏览器的接口 2.BOM包含了许多对象信息,包括如下这些:(1)screen 屏幕信息(2)locati ...

  3. 设置IDEA中properties文件显示中文

    路径: File - Setting - Editor - Code Style - File Encodings

  4. 标准方程法_岭回归_LASSO算法_弹性网

    程序所用文件:https://files.cnblogs.com/files/henuliulei/%E5%9B%9E%E5%BD%92%E5%88%86%E7%B1%BB%E6%95%B0%E6%8 ...

  5. 第一周课堂笔记4th

    1.    if 对应着程序设计中的三种程序执行流程: 顺序结构,一条一条的按顺序执行,自上而下 选择结构,if  else 单分支,双分支,多分支 循环结构 while for (后面学) 流程控制 ...

  6. HDU--2191 汶川地震购米（多重背包）

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2191 分析:有资金n元,而市场有m种大米,每种大米价格不等,重量不等,数量不等, 并且只能整袋购买.如何用 ...

  7. 从0开始学习ssh之岗位管理

    岗位应该有如下属性,id.名称.说明.新建role.java.添加id,name,description并增加三个的get set方法. 之后建立Role.hbm.xml 并加入到applicatio ...

  8. No context type was found in the assembly

    如果解决方法中有多个项目存在,记住要在默认项目中选择你需要的项目进行 enable-migrations    add-migration 以及updatebase

  9. mysqlbinlog: unknown variable 'default-character-set=utf8'

    [xxx@dbhost log]$ mysqlbinlog mysql-bin. mysqlbinlog: unknown variable 'default-character-set=utf8' ...

  10. error LNK2005:"private:__thiscall编译错误

    对于这种编译错误,网上给出了很多解决办法,大部分都是忽略特定库,或者改变多线程调试DLL,但是均没有效果. 这里记录下自己的解决方法,首先按照下图,取消从父级或项目默认设置继承,避免与其他库中的定义冲 ...