将覆盖图定位在图像上

Question

问题

我试图将图像顶部的颜色块/叠加层background: rgba(34, 34, 34, 0.73);放置在它上面。

尝试使用z-index将叠加层推向前方，因为它似乎位于图像后方，而我感觉我的定位position: relative可能是问题，将其更改为{{1}使叠加层跳出位置。

我已经调查过以前提出的问题并没有太多运气。

Angular项目的Github回购：https://github.com/onlyandrewn/angular

home.html的

position: absolute

custom.scss（代码段，为简洁起见）

---
name: home
url: /
---

<div ng-controller="MainCtrl">
    <header>
        <p class="sponsored" id="top">Sponsored by </p>
        <img src="http://placehold.it/200x30" class="sponsors" alt="">
        <h1>Business Directory</h1>
        <div class="find">
            <input type="search" placeholder="What are you looking for?" ng-model="query">
        </div><!-- /.find -->
    </header>

    <div class="businesses">
        <div class="storeIcon">
            <img src="/assets/img/store.png" class="store" alt="">
        </div><!-- /.storeIcon -->

        <p class="number">Search {{businesses.length}} businesses in Brandon</p><button class="filter button">Filter by <i class="fa fa-chevron-down"></i></button>
        <div class="options">
            <div class="cat">
                <div class="categories">
                    <div class="group">
                        <p class="name">Grade Level</p>
                        <div class="check">
                            <input type="radio" name=""><p>Auto</p>
                            <input type="checkbox" name=""><p>Restaurant</p>
                            <input type="checkbox" name=""><p>Other</p>
                        </div><!-- /.check -->
                    </div><!-- /.group -->

                    <div class="group">
                        <p class="name">School Type</p>
                        <div class="check">
                            <input type="checkbox">
                            <input type="checkbox">
                            <input type="checkbox">
                            <input type="checkbox">
                            <input type="checkbox">
                        </div><!-- /.check -->
                    </div><!-- /.group -->
                </div><!-- /.categories -->
            </div><!-- /.cat -->
        </div><!-- /.options -->
    </div><!-- /.businesses -->



    <div class="all">
        <div class="business large-4.columns" data-ng-repeat="business in businesses | filter:query | orderBy:'name'" >
            <div class="overlay">
                <img src="http://placehold.it/300x300" class="storefront" alt="">
            </div><!-- /.overlay -->
            <div class="info">
                <p class="name">{{business.name}}</p>
                <p class="description">{{business.description}}</p>
                <p class="address">{{business.address}}</p>
                <a href="" class="website">{{business.website}}</a>
            </div><!-- /.info -->
        </div>
    </div>

    <footer>
    <hr>
        <i class="fa fa-twitter"></i>
        <i class="fa fa-facebook"></i>

    <div class="backContainer">
        <a href="#top"><p class="back">Back to top</p></a>
    </div><!-- /.backContainer -->
    </footer>
</div>

Answer 1

看看这个，我做了一个小例子，向您展示如何在CSS中进行叠加。希望这会帮助你。

如果要添加图像而不是仅更改不透明度或用颜色覆盖。只需将此行添加到#overlay:hover

即可

background-image: url("imagePath");

同时删除不透明度，因为如果您想使用图片，则无需更改不透明度

示例：

＆＃13;

＆＃13;

div { position: relative; float: left; }
img { display: block; }

#background { background: red; }
#background:hover img { opacity: 0.5; }

#overlay span {
    background: red;
    bottom: 0;
    display: block;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

#overlay:hover span { opacity: 0.5; }

＆＃13;

<!-- Uses background color to fade color from behind. -->
<div id="background">
    <img src="http://lorempixel.com/100/100/food" height="100" width="100" />
</div>
    
<!-- Uses empty span to overlay color. -->
<div id="overlay">
    <span></span>
<div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以在不更改标记的情况下实现您想要的目标：

(A and B) or ((not C) and D)
A and (B or (not C)) and D

.overlay {
    position: relative;
    width: 300px;
    height: 300px;
}
.overlay:hover:after {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(34, 34, 34, 0.73);
    position: absolute;
    left: 0;
}

您当前叠加不起作用的原因是因为您的图片是叠加层的子元素。您可以将img元素视为位于其父级（.overlay）之上。父母不可能坐在其子元素之上。