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

Thanks for all the help, solution below.

感谢下面的所有帮助，解决方案。

I am new to web development, and I am trying to rebuild a website to practice my CSS.

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

The website in questions is http://www.divecarib.com. If you scroll down to the pictures on that home page, you notice that they "fade" on hover. How do I achieve that fade? Using opacity makes the background image come through, which is not how it's implemented on that website.

问题网站是http://www.divecarib.com。如果向下滚动到该主页上的图片，您会注意到它们在悬停时“淡出”。我如何实现这种淡化？使用不透明度可以使背景图像通过，而不是在该网站上实现的方式。

Thank you for the help!

感谢您的帮助！

Below is my fade attempt...did not include the code in original post because I thought it was irrelevant given that I was on the wrong path.

下面是我的淡入淡出尝试...不包括原始帖子中的代码，因为我认为这是无关紧要的，因为我走错了路。

.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;
      }

---Solution (at least how I did it - taken from http://jsbin.com/igahay/1/edit?html,output)-----

---解决方案（至少我是怎么做的 - 取自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;
}

1 个解决方案

#1

You can't fade the opacity of an element, without having what's behind showing through.

你不能淡化元素的不透明度，而不会让后面的内容显示出来。

The site you linked to isn't fading the opacity of the image, but introducing a translucent layer over the top with the text in.

您链接到的网站不会淡化图像的不透明度，而是在顶部引入半透明图层并显示文本。

If you just want to fade the image, but not have the background show through, you could put a wrapper around the image with a solid background colour. But there's no way to fade an image and not have what's behind show through.

如果您只是想淡化图像，但没有透过背景，您可以在图像周围放置一个带有纯色背景的包装纸。但是没有办法淡化图像而没有显示背后的内容。

.container {
     background:#FFF;
}

.container img:hover {
     opacity:0.8;
}

#1