被你忽略的background——css

七娃博客 2020-07-03 930人阅读

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

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

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

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

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

被你忽略的background——css-QUI-Notes

.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, 颜色..)

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

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

被你忽略的background——css-QUI-Notes

代码如下：

.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文章滚动进度条功能，效果图如下：

被你忽略的background——css-QUI-Notes

是不是被秀到了，我第一次看到这样用，研究了半天才发现其原理：背景是用线性渐变实现的，我们眼看到的进度条其实是背景色在跟着页面滑动显示的，顶部留可视区域，其余用白色至渐变背景上一层，然后用了一个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>

赞 3 收藏打赏分享