如何在没有不透明的情况下用CSS淡入图像？

我是网络开发新手，我试图重建一个网站来练习我的CSS。

问题中的网站是http://www.divecarib.com。如果您向下滚动到该主页上的图片，您会发现它们在悬停时会“消失”。我如何实现褪色？使用不透明度会使背景图像通过，而不是如何在该网站上实现。

谢谢你的帮助！

下面是我的淡入淡出尝试...没有在原始文章中包含代码，因为我认为这是无关紧要，因为我在错误的路径。

.fade { 
    opacity: 1; 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
    } 

    .fade:hover { 
     opacity: 0.7; 
     }

---解决方案（至少我是如何做到的 - 从http://jsbin.com/igahay/1/edit?html,output)-----

<div class=picSet> 
      <figure class="tint"> 
       <p id="#p1">Student in training</p> 
       <p id="#p2" style="position: absolute;top: 36px; color: white;">SKAT crew doing open water training</p> 
       <img id=pic1 src="Media/pic1.jpg" /> 
      </figure> 
    </div>

.tint { 
    position: relative; 
    float: left; 
    margin: 3px; 
    cursor: pointer; 
} 

.tint:before { 
    content: ""; 
    display: block; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 
.tint:hover:before { 
    content: ""; 
    background: rgba(96,150,179, 0.54); 
    border: 5px solid #0B689A; 
    border-radius: 20px; 
    margin: 3px; 
} 
.tint p{ 
    position:absolute; 
    top:20px; 
    left:20px; 
    margin: 0; 
    padding: 0; 
    font-family: sans-serif; 
    font-size: 0.75em; 
    display: none; 
    color: #0B689A; 
} 
.tint:hover > p{ 
    display: block; 
}

来源

2016-02-28 CZorio

预计您至少会尝试自己编写此代码。堆栈溢出不是代码写入服务。我建议你做一些额外的研究，无论是通过谷歌或通过搜索，做一个尝试和。如果您仍然遇到麻烦，请返回**您的代码**并解释您尝试过的以及为什么它不起作用。 –

但作为提示...它不是一个不透明的...这是一个透明的颜色叠加。如果你在图像上搜索Stack Overlflow来获取文本，你会发现很多很多的例子......包括如何使背景颜色**部分透明。 http://stackoverflow.com/questions/806000/how-to-give-text-or-an-image-a-transparent-background-using-css?rq=1 –

谢谢，这就是我一直在寻找的。在不知道实际调用的内容的情况下寻找答案时遇到了一些麻烦。 – CZorio

采取你可以不褪色的元素的透明度，而不必有什么背后显示通过。

你挂不褪色的图像的不透明度，但在与文本顶部引入半透明层的部位。

如果您只想淡入图像，但没有显示背景，则可以使用纯色背景将图像放在图像周围。但是没有办法淡化图像，也没有显示背后的东西。

.container { 
    background:#FFF; 
} 

.container img:hover { 
    opacity:0.8; 
}

来源

2016-02-28 15:37:20

如何在没有不透明的情况下用CSS淡入图像？

回答

相关问题