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/

目录
相关文章
|
5月前
|
前端开发 UED 容器
CSS基础-背景属性:颜色、图片、重复
【6月更文挑战第9天】本文介绍了CSS背景属性,包括背景颜色、图片、重复的使用和常见问题。通过实例展示了如何设置背景颜色(如使用rgba()注意透明度影响)、背景图片(使用background-size控制缩放)、背景重复(避免默认平铺导致混乱)以及综合使用背景属性创建复杂效果。理解并熟练运用这些属性能提升网页设计的视觉层次和用户体验。建议通过实践不断探索和提升CSS技能。
72 4
|
6月前
|
前端开发 计算机视觉 开发者
利用CSS改变图片颜色的100种方法!
利用CSS改变图片颜色的100种方法!
147 1
html中设置背景图片不重复不平铺只显示一张图片
html中设置背景图片不重复不平铺只显示一张图片
559 0
|
前端开发
CSS中给表格的第一列及最后一列设置不同的样式
CSS中给表格的第一列及最后一列设置不同的样式
|
29天前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
25 0
|
5月前
|
前端开发
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
|
4月前
|
JavaScript
ELEMENT-PLUES如何设计二级高亮样式,文字如何呈现高亮效果,如果字体出现不对齐的情况,侧边栏icon如何调位置,目录如何折叠,如何延迟动画播放,如何添加阴影,如何添加logo,在行内样式写宽
ELEMENT-PLUES如何设计二级高亮样式,文字如何呈现高亮效果,如果字体出现不对齐的情况,侧边栏icon如何调位置,目录如何折叠,如何延迟动画播放,如何添加阴影,如何添加logo,在行内样式写宽
|
11月前
|
前端开发 安全 容器
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图(二)
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图
|
11月前
|
前端开发
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图(一)
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图
|
移动开发
操作元素样式
操作元素样式
下一篇
无影云桌面