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是一个复合属性,它可以分解成如下几个设置项: ...
随机推荐
- 小米手机 DELETE_FAILED_INTERNAL_ERROR Error while Installing APKs
手机:小米2s,MIUI 9 7.11.16 开发版 手机已处于开发者模式,启用了USB调试,已使用USB线连接了手机,在Android Studio 工具栏点击 "Run ‘app’(Sh ...
- LoadRunner穿过防火墙运行Vuser和进行监控
LoadRunner穿过防火墙运行Vuser和进行监控 LoadRunner穿过防火墙进行测试,总结下来是2个方法:1． 在controller和Vuser的LAN中的防火墙都打开54345端口即 ...
- LoadRunner参数化详解【转】
距离上次使用loadrunner 已经有一年多的时间了.初做测试时在项目中用过,后面项目中用不到,自己把重点放在了工具之外的东西上,认为性能测试不仅仅是会用工具,最近又想有一把好的利器毕竟可以帮助自己 ...
- 2016.9.15初中部上午NOIP普及组比赛总结
2016.9.15初中部上午NOIP普及组比赛总结 2016.09.15[初中部 NOIP普及组 ]模拟赛 又翻车了!表示时超和空超很可恨! 进度 比赛:AC+0+0+20=120 改题:AC+80+ ...
- java.sql.SQLException
java.sql.SQLException 出错:java.sql.SQLException: com.mchange.v2.c3p0.ComboPooledDataSource[ identityT ...
- CheckBox自定义样式
效果: xmal代码: <Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}"> & ...
- vue 打包后app.css,verondor.js文件过大
参考:https://blog.csdn.net/feiyu_may/article/details/80987404 https://blog.csdn.net/qq_4199961 ...
- js如何往数组Array中添加元素 (2013-09-04 10
unshift:将参数添加到原数组开头,并返回数组的长度 pop:删除原数组最后一项,并返回删除元素的值:如果数组为空则返回undefined push:将参数添加到原数组末尾,并返回数组的长度 co ...
- Leetcode 125.验证回文字符串(Python3)
题目: 给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写. 说明:本题中,我们将空字符串定义为有效的回文串. 示例 1: 输入: "A man, a plan, ...
- 2019-1-10-WPF-使用-RenderTargetBitmap-快速截图出现-COMException-提示
title author date CreateTime categories WPF 使用 RenderTargetBitmap 快速截图出现 COMException 提示 lindexi 201 ...