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样式更改有个简单的认识和了解。

相关文章
|
25天前
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
1天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
14 2
|
1月前
|
数据采集 前端开发 JavaScript
捕捉页面的关键元素:用CSS选择器与Puppeteer自动抓取
本文介绍了如何使用 Puppeteer 结合 CSS 选择器抓取动态网页中的关键元素,以亚航网站的特价机票信息为例,通过设置代理 IP、User-Agent 和 Cookie 等技术手段,有效提升爬虫策略,实现高效、稳定的爬取。
捕捉页面的关键元素:用CSS选择器与Puppeteer自动抓取
|
8天前
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
|
22天前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
50 7
|
22天前
|
编解码 前端开发 UED
探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论,旨在帮助开发者更好地理解和运用媒体查询,提升移动端用户体验。
39 4
|
24天前
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
17 0
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
|
1月前
|
前端开发 JavaScript
如何利用 CSS3 动画实现元素的淡入淡出效果?
在上述代码中,定义了一个名为 `fade-in` 的CSS类,其初始透明度为0,并设置了淡入的过渡效果。当通过JavaScript为元素添加 `active` 类时,元素的透明度变为1,实现淡入效果;当再次点击按钮移除 `active` 类时,元素又会逐渐淡出。通过这种方式,可以根据用户的操作灵活地控制元素的淡入淡出效果。
164 3
|
1月前
|
前端开发 JavaScript UED
|
1月前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过<head>部分的<style>标签定义;外部样式表适用于多个页面,通过<link>标签引用外部CSS文件;<style>定义样式,<link>引用资源;已弃用的标签有<font>、<center>、<strike>,属性有color和bgcolor。