阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      CSS 图像透明/不透明

      CSS 图像透明/不透明


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

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


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

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

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


      图像的透明度 - 悬停效果

      将鼠标移到图像上:

      redpack

      代码如下:

      <style>
      #demo1 {opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */}
       #demo1:hover {opacity:1.0;filter:alpha(opacity=100); /* IE8 及其更早版本 */}
      </style>
      
      <img id="demo1" 
          src="https://a.axihe.com/assets/alipay-redpack.png?t=23" 
          alt="redpack" width="150">
      
      

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

      此CSS是:opacity=1.

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

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


      透明的盒子中的文字

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

      代码如下

      <style>
      div.background
      {
        width:500px;
        height:250px;
        background:url(klematis.jpg) repeat;
        border:2px solid black;
      }
      div.transbox
      {
        width:400px;
        height:180px;
        margin:30px 50px;
        background-color:#ffffff;
        border:1px solid black;
        opacity:0.6;
        filter:alpha(opacity=60); /* IE8 及更早版本 */
      }
      div.transbox p
      {
        margin:30px 40px;
        font-weight:bold;
        color:#000000;
      }
      </style>
      <div class="background">
          <div class="transbox">
              <p>
              这些文本在透明框里。
              这些文本在透明框里。
              这些文本在透明框里。
              这些文本在透明框里。
              这些文本在透明框里。
              这些文本在透明框里。
              这些文本在透明框里。
              这些文本在透明框里。
              这些文本在透明框里。
              这些文本在透明框里。
              这些文本在透明框里。
              这些文本在透明框里。
              这些文本在透明框里。
              </p>
          </div>
      </div>
      
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录