>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 20849 个阅读者 刷新本主题
 * 贴子主题:  CSS处理透明/不透明图像 回复文章 点赞(0)  收藏  
作者:flybird    发表时间:2020-01-30 13:43:41     消息  查看  搜索  好友  邮件  复制  引用

  

#klem1,#klem2{

opacity:0.4;

filter:alpha(opacity=40); /* For IE8 and earlier */

}

#klem1:hover,#klem2:hover{

opacity:1.0;

filter:alpha(opacity=100); /* For IE8 and earlier */

}

div.background  {

  width: 500px;

  height: 250px;

  background: url(https://www.javathinker.net/images/klematis.jpg) repeat;

  border: 2px solid black;

  }

div.transbox  {

  width: 400px;

  height: 180px;

  margin: 30px 50px;

  background-color: #ffffff;

  border: 1px solid black;

  /* for IE */

  filter:alpha(opacity=60);

  /* CSS3 standard */

  opacity:0.6;

  }

div.transbox p  {

  margin: 30px 40px;

  font-weight: bold;

  color: #000000;

  }

CSS 图像 透明/不透明

使用CSS很容易创建透明的图像。

注意:CSS Opacity属性是W3C的CSS3建议的一部分。

实例1 - 创建一个透明图像

CSS3中属性的透明度是 opacity

首先,我们将向您展示如何用CSS创建一个透明图像。

   正常的图像

点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小
相同的图像带有透明度:

点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小
看看下面的CSS:

img
{
   opacity: 0.4  ;
   filter: alpha ( opacity = 40 )  ;  /*  IE8 及其更早版本  */
}

   IE9,Firefox,Chrome,Opera,和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小,使得元素更加透明。

IE8和早期版本使用滤镜:alpha(opacity= x)。 x可以采取的值是从0 - 100。较低的值,使得元素更加透明。

实例2 - 图像的透明度 - 悬停效果

将鼠标移到图像上:

点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小
CSS样式:

img  {
   opacity: 0.4  ;
   filter: alpha ( opacity = 40 )  ;  /*   IE8 及其更早版本  */
}
img :hover
{
   opacity: 1.0  ;
   filter: alpha ( opacity = 100 )  ;  /*  IE8 及其更早版本  */
}

   第一个CSS块是和例1中的代码类似。此外,我们还增加了当用户将鼠标悬停在其中一个图像上时发生什么。在这种情况下,当用户将鼠标悬停在图像上时,我们希望图片是清晰的。

此CSS是:opacity=1.

IE8和更早版本使用: filter:alpha(opacity=100).

当鼠标指针远离图像时,图像将重新具有透明度。

实例3 - 透明的盒子中的文字

这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。

源代码如下:


< ! DOCTYPE   html >
< html >
< head >
< meta   charset = " utf-8 " >
< style >  div .background
{
   width: 500 px  ;
   height: 250 px  ;
   background: url ( https :// www . javathinker . net/ images / klematis . jpg )  repeat  ;
   border: 2 px   solid   black  ;
}
div .transbox
{
   width: 400 px  ;
   height: 180 px  ;
   margin: 30 px   50 px  ;
   background-color: #ffffff  ;
   border: 1 px   solid   black  ;
   opacity: 0.6  ;
   filter: alpha ( opacity = 60 )  ;  /*  IE8 及更早版本  */
}
div .transbox   p
{
   margin: 30 px   40 px  ;
   font-weight: bold  ;
   color: #000000  ;
}  </ style >
</ head >

< body >

< div   class = " background " >
< div   class = " transbox " >
< p > 这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。
</ p >
</ div >
</ div >

</ body >
</ html >

   首先,我们创建一个固定的高度和宽度的div元素,带有一个背景图片和边框。然后我们在第一个div内部创建一个较小的div元素。 这个div也有一个固定的宽度,背景颜色,边框 - 而且它是透明的。透明的div里面,我们在P元素内部添加一些文本。




程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-01-31 18:24:34 重新编辑]
  Java面向对象编程-->操作符
  JavaWeb开发-->JavaWeb应用入门(Ⅱ)
  JSP与Hibernate开发-->映射组成关系
  Java网络编程-->客户端协议处理框架
  精通Spring-->创建综合购物网站应用
  Vue3开发-->组合(Composition)API
  10个开发者经常问的JavaScript面试题(附答案解析)
  vue30道面试题
  好消息:《精通Vue.js:Web前端开发技术详解》出版了!
  javaScript中"=="和"==="运算符的区别
  前端面试官指导前端面试攻略
  vue 项目中使用loadsh 的 防抖(debounce)和节流(throttle...
  20分钟带你掌握JavaScript Promise和 Async/Await
  Vue路由传递参数详细说明
  HTML DOM Image图片对象
  JavaScript的Screen 对象
  CSS padding(填充)
  CSS 盒子模型
  JavaScript的 while 循环语句
  JavaScript编程规范
  用JavaScript制作弹出页面
  更多...
 IPIP: 已设置保密
树形列表:   
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。