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

Posted 2023-03-06

【中文标题】如何在没有不透明度的情况下使用 CSS 淡化图像？

【英文标题】：How to fade an image with CSS without opacity?

【发布时间】：2016-06-11 14:16:02

【问题描述】：

感谢大家的帮助，下面的解决方案。

我是 Web 开发的新手，我正在尝试重建一个网站来练习我的 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;

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议您通过 Google 或通过搜索 SO 进行一些额外的研究，然后尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。

但作为提示......这不是不透明......它是透明的颜色覆盖。如果您在 Stack Overlflow 中搜索图像上的文本，您会发现很多示例……包括如何使背景 color 部分透明。 ***.com/questions/806000/…

谢谢你，这就是我想要的。在不知道它的实际名称的情况下寻找答案时遇到了一些麻烦。

我应该更清楚。

请在本题中发布相关代码，或者在JSFiddle或JS Bin等在线代码编辑器中发布相关代码，以方便协同调试。这包括重新创建图片褪色问题所需的 CSS、HTML 和 javascript。

【参考方案1】：

你不能淡化一个元素的不透明度，而不知道背后的东西。

您链接到的网站并没有降低图像的不透明度，而是在顶部引入了一个半透明层，其中包含文本。

如果您只想淡化图像，但不显示背景，您可以在图像周围放置一个带有纯色背景颜色的包装。但是没有办法让图像褪色而不让背后的东西显露出来。

.container 
     background:#FFF;


.container img:hover 
     opacity:0.8;