H5C3--background中cover，背景样式，提升响应区域+精灵图的使用
一.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，背景样式，提升响应区域+精灵图的使用的更多相关文章
- 认识CSS中css背景样式设置
前端之HTML,CSS(五) CSS CSS背景 CSS可以添加背景颜色和背景图片,也可以对图片进行设置.设置的样式有: background-color 背景颜色 background-image ...
- css中的段落样式及背景
一.段落样式 css中关于段落的样式主要有行高,缩进,段落对齐,文字间距,文字溢出,段落换行等.它们的具体语法如下: line-height : normal | length text-indent ...
- CSS中如何使用背景样式属性，看这篇文章就够用了
css背景样式属性介绍 背景样式就是自定义HTML标签的背景颜色或背景图像. 背景属性说明表 属性名 属性值 描述 background-color #f00.red.rgb(255,0,0) 设置背 ...
- android:改动PagerTabStrip中的背景颜色，标题字体的样式、颜色和图标以及指示条的颜色
1.改动PagerTabStrip中的背景颜色 我们在布局中直接设置background属性就可以: <android.support.v4.view.ViewPager android:id= ...
- opacity的背景透明&background中rgba的背景色透明
近期使用css实现了一个loading旋转加载的图片效果,类似gif动画 过程中,需要透明背景,但是图片不要透明 只要背景透明!只要背景透明!只要背景透明! 这里对透明模糊了,两种写法,模糊了 A: ...
- android:修改PagerTabStrip中的背景颜色，标题字体的样式、颜色和图标以及指示条的颜色
1.修改PagerTabStrip中的背景颜色 我们在布局中直接设置background属性即可: <android.support.v4.view.ViewPager android:id=& ...
- CSS3初学篇章_5（背景样式/列表样式/过渡动画）
背景样式 1.背景颜色语法:background-color : transparent | color body { background-color:#CCCCCC;} 2.渐变色彩语法:back ...
- CSS常用字体属性(多出的文本隐藏，或者以省略号的形式显示)和背景样式以及背景图的2个不常用属性：background-origin和background-clip
(一)常用的字体属性: font-weight: 属性值100-900 400等于正常 700等于bold ,数值越大,越粗 font-size:字体大小,单位可以为px或者% font-famil ...
- css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
随机推荐
- Matrix Power Series
Matrix Power Series 给出矩阵A,求矩阵\(A+A^2+...+A^k\)各个元素\(mod\ yyb\)的值,\(n\leq 30,k\leq 10^9,yyb\leq 10^4\ ...
- day06 tar命令使用，vim简单操作以及linux开机过程
上节课复习: cat: 查看全部文件内容 head: 从头查看文件内容,默认为前10行 tail: tail -f //动态查看文件是否增加内容 >> 追加 > 覆盖 more: 百 ...
- 解决CentOS“Zabbix discoverer processes 75% busy”的问题
解决CentOS“Zabbix discoverer processes 75% busy”的问题 运维 立杰 4年前 (2014-08-11) 1104℃ 0评论 在使用Zabbix过程中, ...
- Mysql 1864 主从错误解决方法
故障描述: 在mysql 主库上增加了一个主键操作,没过5分钟就接受到zabbix报警mysql主从同步异常停止信息,一首凉凉送给自己.... 查看现在主从状态 (root@192.168.1.2) ...
- 使用WCF上传文件
在WCF没出现之前,我一直使用用WebService来上传文件,我不知道别人为什么要这么做,因为我们的文件服务器和网站后台和网站前台都不在同一个机器,操作人员觉得用FTP传文件太麻 ...
- 《DSP using MATLAB》Problem 8.21
代码: %% ------------------------------------------------------------------------ %% Output Info about ...
- Java超简明入门学习笔记（零）
Java编程思想第4版学习笔记(零) 前言 这个笔记本主要记录了我在学习Java编程思想(第4版,中文版)的过程中遇到的重难点及其分析.主要参考了C++11版本的C++语言,对比了它 ...
- RabbitMQ安装到使用入门
一.安装erlang1.sudo vim /etc/yum.repos.d/rabbitmq-erlang.repo,将如下内容复制粘贴进去后保存:[rabbitmq-erlang]name=rabb ...
- ubuntu 安装samba共享文件夹
安装samba sudo apt-get install samba smbclient 配置samba sudo cp /etc/samba/smb.conf /etc/samba/smb.conf ...
- [Swoole系列入门教程 1] CentOs 上的Swoole安装
如果已经用宝塔安装好了PHP, 开启相应的扩展 一.编译安装git clone https://github.com/swoole/swoole-src.git cd swoole-src/ phpi ...