一.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. 【案例】鼠标按下，DIV跟随移动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. ThinkPHP实现了ActiveRecords模式的ORM模型

    ThinkPHP实现了ActiveRecords模式的ORM模型,采用了非标准的ORM模型:表映射到类,记录映射到对象.最大的特点就是使用方便和便于理解(因为采用了对象化),提供了开发的最佳体验,从而 ...

  3. limit方法也是模型类的连贯操作方法之一

    limit方法也是模型类的连贯操作方法之一,主要用于指定查询和操作的数量,特别在分页查询的时候使用较多.ThinkPHP的limit方法可以兼容所有的数据库驱动类的. 限制结果数量 例如获取满足要求的 ...

  4. java内存模型JMM理解整理

    什么是JMM JMM即为JAVA 内存模型(java memory model).因为在不同的硬件生产商和不同的操作系统下,内存的访问逻辑有一定的差异,结果就是当你的代码在某个系统环境下运行良好,并且 ...

  5. 19-11-2-M

    最后一个当然要模自己辣. %%%Miemengsb ZJ一下: 三道题没有一道会的,唯一的20还是T2输出$n/2$得的 咝…… T1一看,只会暴力. T2一看,像是状压,但是我是$dpsb$,于是弃 ...

  6. Mac OS下使用ll等命令

    1. 进入用户bash_profile文件 vi ~/.bash_profile 2. 添加如下命令 alias ll='ls -l' alias la='ls -A' alias l='ls -CF ...

  7. spss-数据抽取-拆分与合并

    spss-数据抽取-拆分与合并 数据抽取也成为数据拆分,是指保留.抽取原数据表中某些字段.记录的部分信息,形成一个新字段.新纪录.分为:字段拆分和随机抽样两种方法. 一:字段拆分 如何提取" ...

  8. 《DSP using MATLAB》Problem 8.27

    7月底,又一个夏天,又一个火热的夏天,来到火炉城武汉,天天高温橙色预警,到今天已有二十多天. 先看看住的地方 下雨的时候是这样的 接着做题 代码: %% ----------------------- ...

  9. selenium简单应用

    文章引用自:https://wenku.baidu.com/view/d5c296c75727a5e9846a6182.html 例子:

  10. SPRINGBOOT配置MYSQL,MYBATIS,DRUID

    配置 DRUID连接池 MYSQL数据库 MYBATIS持久层框架 添加依赖 <dependency> <groupId>mysql</groupId> <a ...