JavaWeb学习之路(44)–CSS之透明

简介: 本文目录1. 前言2. 实例解析3. 小结

1. 前言

前面将的概念,算是比较抽象比较难一些了,本篇介绍的透明就非常好理解。CSS可以通过opacity属性设置元素的透明程度,取值范围0-1,当取值为1时是完全不透明,而取值为0是完全透明。

2. 实例解析看如下代码:


<head>

   <meta charset="utf-8">

   <style>

       .opacity-none {

           opacity: 1;

       }

       .opacity-low {

           opacity: 0.7;

       }

       .opacity-high {

           opacity: 0.3;

       }

       .opacity-full {

           opacity: 0;

       }

   </style>

</head>

<body>

   不透明效果:

   <img src="img.jpg" class="opacity-none">

   低透明效果:

   <img src="img.jpg" class="opacity-low">

   高透明效果:

   <img src="img.jpg" class="opacity-high">

   完全透明效果:

   <img src="img.jpg" class="opacity-full">


opacity取值越小,透明度越高,所以效果如下:



3. 小结

通过opacity属性可以轻松的设置元素的透明度。


相关文章
|
22天前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
62 0
|
12天前
|
XML 前端开发 JavaScript
学习css
【5月更文挑战第25天】学习css
17 1
|
22天前
|
前端开发
CSS动画知识点学习
【4月更文挑战第2天】CSS动画知识点学习
25 3
|
22天前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
22天前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
79 1
|
22天前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
19 0
|
22天前
|
Web App开发 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(下)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
33 0
|
前端开发
JavaWeb学习之路(43)–CSS之显示类型
本文目录 1. 前言 2. 块级元素block 3. 行级元素inline 3. 行内块级元素inline-block 4. 不显示none 5. 小结
110 0
JavaWeb学习之路(43)–CSS之显示类型
|
8天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
编写代码中常见问题汇总(html和css)
20 0
|
2天前
|
前端开发
css html 渐变按钮
css html 渐变按钮