一.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. LeetCode 8.字符串转换整数 (atoi)（Python3）

    题目: 请你来实现一个 atoi 函数,使其能将字符串转换成整数. 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止. 当我们寻找到的第一个非空字符为正或者负号时,则将该 ...

  2. 用在 AMD64 上 aria2_1.33.1-1_amd64.deb 的下载页面

    用在 AMD64 上 aria2_1.33.1-1_amd64.deb 的下载页面 如果您正在运行 Ubuntu,请尽量使用像 aptitude 或者 synaptic 一样的软件包管理器,代替人工手 ...

  3. 2、java变量+零碎知识点

    1>展示console:window--show view--console2>创建工程 右键--new---java project 文件夹 jre src 所有的java类都在src中 ...

  4. LUOGU P1342 请柬(最短路)

    传送门 解题思路 又是一道语文题,弄清楚题意之后其实就能想出来了,从1跑一遍最短路,把$dis[n]$加入答案.在建个反图跑一遍最短路,把$dis[n]_$加入最短路就行了.第一遍是去的时候,第二遍是 ...

  5. momentjs 使用总结

    一.安装 cnpm install moment 二.引入 var moment = require('moment') 三.使用 let today = moment().format('YYYY- ...

  6. flock文件锁的学习和应用

    flock文件锁 学习与应用  2016-9-20 作用: 可以使用flock文件锁,避免指定命令的同时执行.(实现任务锁定,解决冲突) 用法: # flock -xn /opt/lock_file ...

  7. python 模拟键盘输入

    备忘录 import win32api import win32con win32api.keybd_event(17,0,0,0) #ctrl键位码是17 win32api.keybd_event( ...

  8. VC++中文件读写汇总

    1,读 A法: CString strFileName = "C:\\dd.txt"; std::ifstream in; std::locale::global(std::loc ...

  9. Liunx常用命令行（Ubuntu）

    关闭防火墙的命令行: 1. 永久性生效 开启:chkconfig iptables on 关闭:chkconfig iptables off 2. 即时生效,重启后失效 开启:service ipta ...

  10. 2018-10-19-C#-序列类为-xml-可以使用的特性大全

    title author date CreateTime categories C# 序列类为 xml 可以使用的特性大全 lindexi 2018-10-19 9:9:47 +0800 2018-6 ...