javascript - 颜色叠加在不透明的div上

Question

我有三个像这样彼此相邻的 div:

HTML 看起来像这样:

<div class="row">

<div class="col col--lg-4 col--md-6">
    <div class="reserved__inner">
        <img src="images/image1.png" alt="" />
        <div class="reserved__text">
            <h3 class="first">Lorem ipsum</h3>
            <p>lorem ipsum text</p>
            <a href="#" class="button">Link 1</a>
        </div>
    </div>
</div>

<div class="col col--lg-4 col--md-6">
    <div class="reserved__inner">
        <div class="overlay"></div>
        <img src="images/image2.png" alt="" />
        <div class="reserved__text">
            <h3 class="first">Lorem ipsum</h3>
            <p>lorem ipsum text</p>
            <a href="#" class="button">Link 2</a>
        </div>
    </div>
</div>

<div class="col col--lg-4 col--md-6">
    <div class="overlay"></div>
    <div class="reserved__inner">
        <img src="images/image3.png" alt="" />
        <div class="reserved__text">
            <h3 class="first">Lorem ipsum</h3>
            <p>lorem ipsum text</p>
            <a href="#" class="button">Link 2</a>
        </div>
    </div>
</div>

如您所见，我的 div 中还有一个 p 元素 和一个 a 元素，但它们是隐藏的。在我的 javascript 文件中，我有这个:

$('.reserved__inner').on({
    mouseenter: function() {
        $(this).find('h3').addClass('black');
        $(this).find('p').show();
        $(this).find('a').show();

    },
    mouseleave: function() {
        $(this).find('h3').removeClass('black');
        $(this).find('p').hide();
        $(this).find('a').hide();
    }
});

当你将鼠标悬停在上面时，你会看到:

但现在我还想在您将鼠标悬停在图像上时在图像上覆盖一层。像这样:

我的 CSS 目前看起来像这样:

.reserved__inner {
    width: 100%;
    min-height: 380px;
    position: relative;
    overflow: hidden;
}

.reserved__inner img {
    min-height: 100%;
    height: auto!important;
    min-width: 100%;
    width: auto!important;
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

.reserved__text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 56px 54px 50px 58px;
    /*cursor: pointer;*/
}

.reserved__text h3 {
    margin-bottom: 12px;
    line-height: 35px;
}

.reserved__text h3 sup {
    font-size: 10px;
}

.reserved__text h3.first {
    color: #fff;
}

.reserved__text p {
    line-height: 24px;
    margin-bottom: 14px;
}

但我真的对如何创建颜色叠加感到困惑。有人可以帮我解决这个问题吗？

Answer 1

通过稍微不同的思考，您可以很容易地做到这一点。

只需将背景颜色添加到 .reserved_inner 类，然后降低图像本身的不透明度。

.reserved__inner {
    width: 100%;
    min-height: 380px;
    position: relative;
    overflow: hidden;
     background: #a00; /* add a background color here */
}

.reserved__inner img {
    min-height: 100%;
    height: auto!important;
    min-width: 100%;
    width: auto!important;
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
     opacity: .5; /* Lower the image opacity here */
}

$('.reserved__inner').on({
    mouseenter: function() {
        $(this).find('h3').addClass('black');
        $(this).find('p').show();
        $(this).find('a').show();
      $(this).children('img').css({opacity: '.3'}); /* Changes image opacity */

    },
    mouseleave: function() {
        $(this).find('h3').removeClass('black');
        $(this).find('p').hide();
        $(this).find('a').hide();
      $(this).children('img').css({opacity: '.5'});/* Changes image opacity */
    }
});

.reserved__inner {
    width: 100%;
    min-height: 380px;
    position: relative;
    overflow: hidden;
	 background: #a00; /* add a background color here */
}

.reserved__inner img {
    min-height: 100%;
    height: auto!important;
    min-width: 100%;
    width: auto!important;
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
	 opacity: .5; /* Lower the iamge opacity here */
}

.reserved__text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 56px 54px 50px 58px;
    /*cursor: pointer;*/
}

.reserved__text h3 {
    margin-bottom: 12px;
    line-height: 35px;
}

.reserved__text h3 sup {
    font-size: 10px;
}

.reserved__text h3.first {
    color: #fff;
}

.reserved__text p {
    line-height: 24px;
    margin-bottom: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">

<div class="col col--lg-4 col--md-6">
    <div class="reserved__inner">
        <img src="https://placekitten.com/380/200" alt="" />
        <div class="reserved__text">
            <h3 class="first">Lorem ipsum</h3>
            <p>lorem ipsum text</p>
            <a href="#" class="button">Link 1</a>
        </div>
    </div>
</div>

<div class="col col--lg-4 col--md-6">
    <div class="reserved__inner">
        <div class="overlay"></div>
        <img src="https://placekitten.com/380/200" alt="" />
        <div class="reserved__text">
            <h3 class="first">Lorem ipsum</h3>
            <p>lorem ipsum text</p>
            <a href="#" class="button">Link 2</a>
        </div>
    </div>
</div>

<div class="col col--lg-4 col--md-6">
    <div class="overlay"></div>
    <div class="reserved__inner">
        <img src="https://placekitten.com/380/200" alt="" />
        <div class="reserved__text">
            <h3 class="first">Lorem ipsum</h3>
            <p>lorem ipsum text</p>
            <a href="#" class="button">Link 2</a>
        </div>
    </div>
</div>

从技术上讲，它是颜色上的图像而不是图像上的颜色，但整体效果是一样的。