一.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. Dash Speed【好题，分治，并查集按秩合并】

    Dash Speed Online Judge:NOIP2016十联测,Claris#2 T3 Label:好题,分治,并查集按秩合并,LCA 题目描述 比特山是比特镇的飙车圣地.在比特山上一共有 n ...

  2. golang 获取当前可执行程序的当前路径

    import ( "errors" // "fmt" "os" "os/exec" "path/filepat ...

  3. SaltStack远程执行Windows job程序(黑窗口)填坑经过

    近期接到领导通知,要将公司内的所有Windows服务添加到自动发布系统中,由于这种服务很多,节点分布散乱,每次都是由开发主管手动替换(虽然他们自己开发了自动打包替换工具,但仍需要一台一台登陆到服务器上 ...

  4. 四种JavaEE架构简介

    1. 传统三层架构 配图是一个基于MVC的三层架构, 大致可以分成表现层, 业务层和持久层 表现层负责接收请求和转发请求 业务层主要负责处理请求, 值得注意的是事务管理, 日志记录等操作通常也是封装在 ...

  5. HTML - 表格标签相关

    <html> <head></head> <body> <!-- table (表格) border : 表格的边框 width : 表格的宽 h ...

  6. 17多校6 HDU - 6102

    题意:给一个排列p,m次查询l,r,\(\sum_{i=l}^r\sum_{j=i+1}^r\sum_{k=j+1}^r[gcd(p_i,p_j)==p_k]p_k\) 题解:离线,枚举右端点,对于每 ...

  7. sql.xml where ids in的写法

    <if test="iSurfaceTypeArray != null"> AND b.i_SurfaceType in <!-- 根据外观检查查询 --> ...

  8. 启动zuul时候报错:The bean 'proxyRequestHelper', defined in class path resource [org/springframework/cloud/netflix/zuul

    启动zuul时候报错:The bean 'proxyRequestHelper', defined in class path resource [org/springframework/cloud/ ...

  9. Spring整合JUnit单元测试

    必须先有JUnit的环境(已经导入了Junit4的开发环境) 1.导入jar包 2.在测试类上添加注解 @RunWith(SpringJUnit4ClassRunner.class) @Context ...

  10. AtCoder - 3959

    AtCoder - 3959https://vjudge.net/problem/1583855/origin求最长连续递增长度就行,答案是n-max(len) #include<iostrea ...