Question

我是html / css编程的新手，我正在为我的课程编写一个网站代码。基本上，我正在尝试制作此页面的照片：www.stanford.edu/~tayoamos变得更透明，并在您悬停它们时在顶部显示另一个图像。

这是我的html和css：

HTML

    <html>
<head>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <title> Instalert </title>


</head>

<body>
    <div id="photos">
        <img src="http://distilleryimage10.s3.amazonaws.com/cf16c8b4865411e3ab4012f602fa8bc2_8.jpg" alt ="JB1">
        <img src ="http://distilleryimage7.s3.amazonaws.com/68042be2857511e382bb121b6297674b_8.jpg" alt="JB2">
        <img src="http://distilleryimage10.s3.amazonaws.com/9a5b791283bb11e3b33312c4f3a07952_8.jpg" alt "JB3">
        <img src="http://distilleryimage6.s3.amazonaws.com/230ce59a831a11e38fdc120c7c565106_8.jpg" alt "JB4">
        <img src="http://distilleryimage9.s3.amazonaws.com/70d891a6853211e3828f1225728e27b1_8.jpg" alt ="KK1">
        <img src="http://distilleryimage0.s3.amazonaws.com/4462c49a853011e385020e36ca40396c_8.jpg" alt "KK2">
        <img src="http://distilleryimage10.s3.amazonaws.com/80531368852811e39c3c12a357c94c82_8.jpg" alt "KK3">
        <img src="http://distilleryimage11.s3.amazonaws.com/97b2d28484bd11e3a7630e29514d93ff_8.jpg" alt "KK4">
        <img src="http://distilleryimage5.s3.amazonaws.com/e66c6606856c11e399cf1225396dfdfd_8.jpg" alt "RR1">
        <img src="http://distilleryimage3.s3.amazonaws.com/ceaedd12849211e3928a0e05f3709127_8.jpg" alt "RR2">
        <img src="http://distilleryimage11.s3.amazonaws.com/37805c6e83e211e3a1ab0af82f025223_8.jpg" alt "RR3">
        <img src="http://distilleryimage8.s3.amazonaws.com/dcda744c83d811e3bbfc122878962eb0_8.jpg" alt "RR4">
    </div>
</body>

</html>

CSS

* { margin: 0; padding: 0; }

photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;

}
#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }

#photos img {
  -webkit-transition: all 0,3s ease;
     -moz-transition: all 0,3s ease;
       -o-transition: all 0,3s ease;
      -ms-transition: all 0,3s ease;
          transition: all 0,3s ease;
}

 #photos:hover {
  opacity:.5;
 }



 }

}

非常感谢你！

Answer 1

这样做：

img:hover{
  opacity:0.4; /* how much transparent you want image to be*/
  filter:alpha(opacity=40); /* browser fix*/
  -webkit-opacity:0.4; /*vendor prefixes for website browsers*/
  -moz-opacity:0.4; /* same as above, edited thankx to @ Daniel_Lisik  */
}

demo here

此外，您的alt在某些=代码中错过了img！

修改

要在顶部图像上悬停时显示下方的图像，您必须执行以下操作：

wrap您希望默认显示并悬停在一个div
中的图像对

制作图片absolute位置和容器relative。

<强> CSS

.imgdiv, #photos { position:relative; /* very important */ } /* stack images one behind other */ .imgdiv > img.top { position:absolute; z-index:10; } .imgdiv > img.bottom { position:relative; z-index:9; } /* this part css will work on hover */ .imgdiv > img.top:hover { cursor:pointer; opacity:0.1; /* make top image go invisisble */ filter:alpha(opacity=10); -webkit-opacity:0.; -moz-opacity:0.1; }

see demo

Answer 2

不透明度属性对ie8不起作用并使用滤镜：alpha（opacity = 40）使图像透明

Answer 3

虽然这不是我的专业领域，但我找到了一些您可能想要查看的资源（如果您还没有）：

http://www.w3schools.com/css/css_image_transparency.asp

http://themes.themaxdavis.com/tutorial/transparent_images

这两个都包含一些易于理解的例子。

Answer 4

具有css过渡效果的不透明度

http://jsfiddle.net/ByBtt/

img {
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}

img:hover{
opacity: 0.5; 
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
}

当您用鼠标悬停图像时，如何使图像透明？

4 个答案: