background一般用法都知道,后面跟url引入背景图片/svg/base64图片,或者跟16进制色值,很少人去关注它最初的属性,以至于被忽略了一些更好玩的用法,今天给你看看它的骚操作...

今天从2个属性延展它的属性,一个是background-size,另一个是linear-gradient,首先看看第一个background-size。

1.background-size: length 长度|percentage %百分比|cover|contain|auto 默认; 将图片放大至某种程度,总体来说,是这个意思

  1. auto 默认属性值,不做任何改变保持原比例显示图片大小
  2. cover 等比缩放铺满整个区域,保持原比例,将图片显示在窗口内,此时太长的一边边界你可能看不到了
  3. contain 强制拉伸图片至指定窗口大小,原图片的四边都能看到,只不过图片变形了
  4. 单个值100%  表示横向宽度100%,高度auto——被省略了,这是图片高度会跟随浏览器屏幕分辨率变化,出现露白等现象
  5. 两个值 100px 50px, 将图片强制缩放到宽100px 高50px的区域内
  6. 两个值 100%  50%,  将图片强制缩放到宽100%    高50%的区域内

例如:我们设置一个盒子300*300,背景引入图片并设置:background-size: 100px 100px;我们看看下面的效果

.box{width: 300px;height: 300px;margin-bottom: 20px;background: #666 url(../../img/1.jpg) no-repeat;background-size: 100px 100px;}

结果很明显,被缩放到了100*100的区域内,符合上面第五条的规则。其他的可以自己测试,就不一一展示了,比较简单。接下来我们继续说linear-gradient。

2.linear-gradient

用法:background-image: linear-gradient(角度|方向, 颜色1, 颜色2, 颜色..)

  1. 角度|方向,可以直接写具体
    角度:0deg,90deg,45deg,135deg...
    方向:to right,to top,to right bottom, to left top

例如:将一个300*300的正方形,沿对角线分割两半,一半红色,一半蓝色,要求使用linear-gradient属性,效果如下:

代码如下:

.box{width: 300px;height: 300px;margin-bottom: 20px;background: #666 url(../../img/1.jpg) no-repeat;background-image: linear-gradient(45deg,red 50%,blue 50%);}

发现没有,我们在box里面引入了图片,结果却被后面的linear-gradient线性渐变覆盖了,图片也不显示了,那能不能一半红色,一半显示背景图片呢?

答案是肯定的,只需将css中blue改为透明色transparent即可!效果不做展示,请自行测试。

有的朋友肯定疑问:“就这?”,不,来个骚操作,用上面2个属性实现下面的纯css文章滚动进度条功能,效果图如下:

是不是被秀到了,我第一次看到这样用,研究了半天才发现其原理:背景是用线性渐变实现的,我们眼看到的进度条其实是背景色在跟着页面滑动显示的,顶部留可视区域,其余用白色至渐变背景上一层,然后用了一个css 的’*‘适配器,将子元素全部定位到最上层,这样页面既可以滚动,又不被遮挡。

css代码:

                .article{width: 300px;height: 500px;position: relative;overflow: hidden;}
		.article::after{content: "";background: #fff;position: absolute;left: 0;top: 2px;right: 5px;bottom: 0;}
		.article .content{height: 100%;overflow: auto;}
		.content aside{    padding: 0 20px;
		    background: linear-gradient(to right top, #f66 50%, #f0f0f0 50%) no-repeat;
		    background-size: 100% calc(100% - 480px + 5px);
		}
		.content aside > * {
		  position: relative;
		  z-index: 9;
		}
		/*改变滚动轴*/
		.content::-webkit-scrollbar {
		  width: 5px;
		}
		.content::-webkit-scrollbar-track {
		  background-color: #f0f0f0;
		}
		.content::-webkit-scrollbar-thumb {
		  border-radius: 2px;
		  background-color: #66f;
		}

html代码:

<section class="article">
			<div class="content">
				<aside>
					<p>
					2019中国互联网企业100强榜单
8月14日,中国互联网协会、工业和信息化部网络安全产业发展中心(工业和信息化部信息中心)在2019年中国互联网企业100强发布会暨百强企业高峰论坛上联合发布了2019年中国互联网企业100强榜单、互联网成长型企业20强榜单和《2019年中国互联网企业100强发展报告》。阿里巴巴(中国)有限公司、深圳市腾讯计算机系统有限责任公司、百度公司、京东集团、浙江蚂蚁小微金融服务集团股份有限公司、网易集团、美团点评、北京字节跳动科技有限公司、三六零安全科技股份有限公司、新浪公司位列榜单前十名。
今年互联网百强企业聚焦创新引领、产业融合、工业互联网等方面,主要呈现出六大特点:
一是整体规模跨越式提升,成为数字经济新引擎。2019年互联网百强企业互联网业务收入高达2.75万亿元,比2018年互联网百强企业互联网业务收入增长超过1万亿元,占我国数字经济的比重达8.8%,对数字经济的贡献率达14%,带动数字经济增长近2个百分点成为带动我国互联网产业发展的重要支撑。从互联网业务收入增长率分布看,有86家企业互联网业务收入实现增长。
二是研发投入强度突破10%,打造中国核心技术。2019年互联网百强企业的研发投入达到1538.7亿元,同比增长45.1%,平均研发强度突破10%,比我国R&D经费投入强度高出近8个百分点。从研发强度分布看,有40家企业研发强度在10%以上,4家企业研发强度在30%-35%之间。互联网百强企业不断突破核心技术,互联网百强企业不断提升原始创新能力,加快推进5G、人工智能、云计算、大数据等关键核心技术突破,部分技术处于国际领先水平。2019年互联网百强企业已经拥有专利近8万项,其中发明专利数近6万项。2019年互联网百强企业中应用大数据企业29家,云计算28家,人工智能相关企业24家,运用物联网技术相关的企业3家。
三是应用场景多元化,智能+打造生活消费新模式。互联网百强企业深化消费互联网发展,已对衣、食、住、行等各方面进行了全场景覆盖,业务涵盖互联网公共服务、网络媒体、音乐与视频、社交网络、科技创新与知识产权等17个领域,全方位提升了人民群众的生活、工作、文化、娱乐、教育等方面的生活质量。2019年互联网百强企业中从事电子商务的共18家;涉及互联网公共服务的共41家,主要提供信息查询、教育医疗、政务办理、公共出行等便民服务,让普通人民享受到“互联网+”带来的便利生活;21家企业涉及音乐与视频业务。同时,互联网百强企业积极发展智能产业,不断拓展“智能+”,创造了智慧门店、VR/AR试衣试妆、无感支付等丰富的新消费业态和场景,打造未来智能生活消费新模式。
四是工业互联网入实践深耕,赋能传统产业高质量发展。互联网百强企业通过不断向各行各业“渗透”和“赋能”,推动云计算、大数据、物联网等信息通信技术与实体经济深入融合,培育新产业、新业态、新模式,支撑实体经济高质量发展。2019年互联网百强企业产业互联网数量再创新高,以服务实体经济客户为主的产业互联网领域企业数量达到60家,累计服务近4000万家企业。其中,涉及互联网数据服务41家,生产制造服务13家,科技创新和知识产权24家,B2B电商11家,互联网基础服务10家。
五是“独角兽” 企业快速增长,国际行业地位再创新高。2019年互联网百强企业及下属企业涌现出蚂蚁金服、字节跳动、京东数科、满帮集团、优刻得、找钢网等25家独角兽企业,同比增长38.9%,业务涉及金融科技、智慧物流、电子商务、新文娱等领域。从全球公司市值排名情况看,2018年,全球互联网公司市值前三十强中互联网百强企业占10家,其中,腾讯集团和阿里巴巴稳居全球互联网公司市值前十强。
六是覆盖地域实现新扩展,网络扶贫取得新成效。2019年拥有互联网百强企业的省份达到18个,在2018年基础上新增江西和山东两个省份,地域覆盖不断增加。在区域分布上,东部地区互联网百强企业数量共86家,中西部地区互联网百强企业共12家,东北地区互联网百强企业数量保持2家。其中,安徽、贵州、河南、湖北、湖南、江西、重庆、四川8个中西部地区互联网百强企业数量不断增加,较去年增长1家。互联网百强企业积极践行企业社会责任,发挥互联网在助推脱贫攻坚中的作用,探索“直播+电商”等扶贫新模式,推进精准扶贫、精准脱贫。据统计,超过一半以上互联网百强企业参与网络扶贫。
			</p>
				</aside>
			</div>
		</section>