CSS样式更改——多列、元素是否可见、图片透明度

简介: CSS样式更改——多列、元素是否可见、图片透明度

前言

上篇文章主要讲述了CSS样式更改中的过渡、动画基础知识,这篇文章我们来介绍下CSS样式更改中多列、元素是否可见、图片透明度知识。。

1.多列 DoubleCol

1).创建多列

div
{
-moz-column-count:2;   /* Firefox */
-webkit-column-count:2; /* Safari 和 Chrome */
column-count:2;
}
div被分隔成两列

2).规定列之间的间隔

div
{
-moz-column-gap:30px;    /* Firefox */
-webkit-column-gap:30px;  /* Safari 和 Chrome */
column-gap:30px;
}
规定列之间30像素的间隔

3).列规则

div
{
-moz-column-rule:1px dotted red;  /* Firefox */
-webkit-column-rule:1px dotted red;  /* Safari and Chrome */
column-rule:1px dotted red;
}
column-rule-width   列之间的宽度规则
column-rule-style   列之间的样式规则
column-rule-color   列之间的颜色规则

4).规定列的宽度和列数

div
{
columns:10px 3;
-moz-columns:10px 3; /* Firefox */
-webkit-columns:10px 3; /* Safari 和 Chrome */
}
column-width   列的宽度
column-count   列数

5).填充列

div
{
column-fill:auto;
}
balance 列处理
auto   自动填充

2.元素是否可见Visibility

div{
  visibility:hidden
  }
visible      元素可见
hidden      元素不可见
collapse     用在表格中元素可见,其它标签元素不可见

3.图片透明度0pacity

opacity:0.4  范围为0~1的小数
filter:alpha(opacity=100) 范围为0~100的整数

参考文档:W3C官方文档(CSS篇)

总结

这篇文章主要介绍了CSS样式更改篇中的多列、元素是否可见、图片透明度知识,希望让大家对CSS样式更改有个简单的认识和了解。
想要学习更多,请前往Python爬虫与数据挖掘专用网站:http://pdcfighting.com/

相关文章
|
12月前
|
存储 SQL 缓存
|
12月前
|
存储 算法 Java
深入理解Java内存管理
本文将通过通俗易懂的语言,详细解析Java的内存管理机制。从JVM的内存结构入手,探讨堆、栈、方法区等区域的具体作用和原理。进一步分析垃圾回收机制及其调优方法,最后讨论内存泄漏的常见场景及防范措施。希望通过这篇文章,帮助读者更好地理解和优化Java应用的内存使用。
TypeError: Cannot set properties of undefined (setting ‘resdata‘),res定义数据出现的问题,定义的方法用this换成that
TypeError: Cannot set properties of undefined (setting ‘resdata‘),res定义数据出现的问题,定义的方法用this换成that
|
安全 物联网 Android开发
构建未来:Android与IoT设备的无缝集成
【5月更文挑战第10天】 在数字化时代的浪潮中,智能设备与互联网的结合日益紧密。本文深入探讨了Android系统如何通过其开放性和灵活性成为连接物联网(IoT)设备的关键枢纽。我们将分析Android平台与IoT设备集成的技术途径,探索它们如何共同塑造智能家居、可穿戴技术以及工业自动化等领域的未来。文中不仅阐述了当前的发展状况,还展望了未来的发展趋势,特别是安全性和隐私保护方面的挑战及对策。
358 1
|
API 图形学 Swift
【Swift开发专栏】Swift与Core Graphics框架
【4月更文挑战第30天】本文介绍了Swift如何与Apple的Core Graphics框架结合,用于高性能的图形渲染和用户界面设计。Core Graphics提供底层绘图接口,包括图形上下文、路径、颜色空间、渐变和阴影等概念。在Swift中,开发者可直接调用Core Graphics函数,创建图形上下文、设置绘图属性、绘制图形和处理图像。文章还展示了如何实现渐变填充、阴影效果及自定义绘图代码,帮助开发者利用Swift创造复杂的图形和动画。通过掌握这些技能,开发者能为移动应用打造更具吸引力的视觉体验。
283 1
|
监控 NoSQL Java
性能工具之 Java 调试工具 JDB
【2月更文挑战第25天】性能工具之 Java 调试工具 JDB
414 4
|
SQL 消息中间件 Apache
Flink报错问题之使用hive udf函数报错如何解决
Apache Flink是由Apache软件基金会开发的开源流处理框架,其核心是用Java和Scala编写的分布式流数据流引擎。本合集提供有关Apache Flink相关技术、使用技巧和最佳实践的资源。
|
分布式计算 资源调度 DataWorks
dataworks常见问题之数据服务api返回超时如何解决
DataWorks是阿里云提供的一站式大数据开发与管理平台,支持数据集成、数据开发、数据治理等功能;在本汇总中,我们梳理了DataWorks产品在使用过程中经常遇到的问题及解答,以助用户在数据处理和分析工作中提高效率,降低难度。
208 2
|
人工智能 Serverless API
AI 绘画平台难开发,难变现?试试 Stable Diffusion API Serverless 版解决方案
为了帮助用户高效率、低成本应对企业级复杂场景,函数计算团队正式推出 Stable Diffusion API Serverless 版解决方案,通过使用该方案,用户可以充分利用 Stable Diffusion +Serverless 技术优势快速开发上线 AI 绘画应用,期待为广大开发者 AI 绘画创业及变现提供思路。
87802 4
|
JavaScript 前端开发 安全
JavaScript中跨域资源共享(CORS):原理和解决方案
【4月更文挑战第22天】本文介绍了JavaScript中跨域资源共享(CORS)的原理和解决方案。CORS借助HTTP头部字段允许跨域请求,核心是Access-Control-Allow-Origin响应头。解决方案包括:服务器端设置响应头(如使用Express.js的cors中间件)、使用代理服务器或JSONP。现代Web开发推荐使用CORS,因为它更安全、灵活,而JSONP已逐渐被淘汰。理解并正确实施CORS能提升Web应用性能和安全性。