阿西河

所有教程

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

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    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的教程都有!

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

    目录
    目录