一.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. mysql模糊查询特殊字符(\,%和_)处理

    /** * sql模糊查询特殊字符(\,%和_)处理 * * @param string $str * @return string */ public static function like_se ...

  2. linux /bin/find 报错：paths must precede expression 及find应用

    1.问题描述,运行下面的命令,清楚日志 [resin@xx ~]$ ssh xxx  "/usr/bin/find /data/logs/`dirname st_qu/stdout.log` ...

  3. 【笔记篇】C#笔记1

    返回目录:目录请戳这里~ 以后的C#笔记如果不出意外的话都是Win10 Professional + VS2015 Professional出的,(当然还有直接在编译框敲的所以能不能过编译我也不知道┑ ...

  4. Leetcode143. Reorder List重排链表

    给定一个单链表 L:L0→L1→-→Ln-1→Ln , 将其重新排列后变为: L0→Ln→L1→Ln-1→L2→Ln-2→- 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 示例 1: ...

  5. python3 使用aria2下载的一个脚本

    import requests import time ariaurl="http://localhost:6800/jsonrpc" dlurl="http://xxx ...

  6. uoj51 元旦三侠的游戏

    题意:询问a,b,n.每次可以a+1或b+1,保证a^b<=n,不能操作者输.问先手是否赢? n<=1e9. 标程: #include<cstdio> #include< ...

  7. Hadoop 初体验

    Hadoop 是一个基于谷歌发表的几篇论文而开发的一个分布式系统基础架构,用户可在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储.Hadoop现在已经成了大数据的代 ...

  8. C++ 函数模板&类模板详解

    在 C++ 中,模板分为函数模板和类模板两种.函数模板是用于生成函数的,类模板则是用于生成类的. 函数模板&模板函数     类模板&模板类  必须区分概念 函数模板是模板,模板函数时 ...

  9. 2019牛客暑假多校赛（第二场） F和H（单调栈）

    F-Partition problem https://ac.nowcoder.com/acm/contest/882/F 题意:输入一个数n,代表总共有2n个人,然后每个人对所有人有个贡献值,然后问 ...

  10. PAT甲级——A1002 A+B for Polynomials

    This time, you are supposed to find A+B where A and B are two polynomials. Input Specification: Each ...