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/

目录
相关文章
|
6月前
|
前端开发 UED 容器
CSS基础-背景属性:颜色、图片、重复
【6月更文挑战第9天】本文介绍了CSS背景属性,包括背景颜色、图片、重复的使用和常见问题。通过实例展示了如何设置背景颜色(如使用rgba()注意透明度影响)、背景图片(使用background-size控制缩放)、背景重复(避免默认平铺导致混乱)以及综合使用背景属性创建复杂效果。理解并熟练运用这些属性能提升网页设计的视觉层次和用户体验。建议通过实践不断探索和提升CSS技能。
86 4
html中设置背景图片不重复不平铺只显示一张图片
html中设置背景图片不重复不平铺只显示一张图片
599 0
|
前端开发
CSS中给表格的第一列及最后一列设置不同的样式
CSS中给表格的第一列及最后一列设置不同的样式
102 0
|
6月前
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
|
5月前
|
JavaScript
ELEMENT-PLUES如何设计二级高亮样式,文字如何呈现高亮效果,如果字体出现不对齐的情况,侧边栏icon如何调位置,目录如何折叠,如何延迟动画播放,如何添加阴影,如何添加logo,在行内样式写宽
ELEMENT-PLUES如何设计二级高亮样式,文字如何呈现高亮效果,如果字体出现不对齐的情况,侧边栏icon如何调位置,目录如何折叠,如何延迟动画播放,如何添加阴影,如何添加logo,在行内样式写宽
|
前端开发
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图(一)
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图
|
前端开发 安全 容器
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图(二)
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图
ElementUI:表格table列宽度压缩出现空白
ElementUI:表格table列宽度压缩出现空白
222 0
ElementUI:表格table列宽度压缩出现空白
|
XML PHP 数据安全/隐私保护
phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
转:http://www.cnblogs.com/huangcong/p/3687665.html   首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包含了PHPExcel.
1933 0

相关实验场景

更多