线性渐变无法覆盖图像

Question

＆＃13;

＆＃13;

.q-items-container .q-item-info {
    float: left;
    position: relative;
    width: 30.3rem;
    height: 40rem;
    margin: 2rem;
    background: #ffffff;
    cursor: pointer;
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

.q-items-container .q-item-info .q-food-img {
    width: 100%;
    height: 55%;
}

.q-items-container .q-item-info .q-food-info {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10000;
    color: white;
}

.q-items-container .q-item-info .q-stars {
    background-color: #2eb82e;
    padding: 2px;
    margin-top: 3px;
    border-radius: 3px;
}

.q-items-container .q-item-info .q-separator {
    width: 100%;
    height: 7px;
    background-color: #6c41a6;
}

.q-items-container .q-item-info .comp-container {
    width: 100%;
    height: 8rem;
    position: absolute;
    text-align: center;
    top: 275px;
    /* background-color:black; */
}

.q-items-container .q-item-info .comp-container .q-review {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}

.q-items-container .q-item-info .comp-container .q-review .review {
    width: 48%;
    /* margin:auto; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.q-items-container .q-item-info .comp-container .q-review .sep {
    width: 4%;
    display: flex;
    padding: 5px 0 5px 0;
    justify-content: center;
    align-items: center;
}

.q-items-container .q-item-info .comp-container .q-review .price {
    width: 48%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.q-item-info .comp-container .q-company {
    width: 8rem;
    height: 8rem;
    border: 0.8rem solid #6c41a6;
    -webkit-border-radius: 2rem;
    border-radius: 4rem;
    margin: auto;
}

.q-items-container .q-item-info .q-order-now {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 1rem;
    margin-bottom: 0;
    height: 4rem;
    background: #6c41a6;
    color: #fff;
    font-size: 1.4rem;
    text-align: center;
}

＆＃13;

<div class="q-items-container">
        <div class="q-item-info">
            <div class="q-food-info">
                <div>xyz</div>
                <div>yzx</div>
            </div>

            <img style="background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
            rgba(0,0,0,0.55);" class="q-food-img" src="https://static.pexels.com/photos/8313/food-eating-potatoes-beer-8313.jpg">
            <div class="q-separator"></div>
            <div class="comp-container">
                <img class="q-company" src="https://n6-img-fp.akamaized.net/free-icon/telegram-logo_318-102687.jpg?size=338c&ext=jpg">
                <div class="q-review">
                    <div class="review">
                        <span style="color:#4d4d49;">24</span>
                        <span style="color:#898989;">Reviews</span>
                    </div>
                    <div class="sep">
                        <div style="width:1px;height:100%;background-color:#d7d7d7;"></div>
                    </div>
                    <div class="price">
                        <span style="color:#4d4d49;">$4.99</span>
                        <span style="color:#898989;">Avg.Price</span>
                    </div>
                    <div>
                    </div>
                </div>
            </div>
            <div class="q-order-now" ng-click="goToListingPage(cart)">
                <div ng-show="cart.isOpen">Order Now <span>&#8594;</span></div>
                <div ng-show="!cart.isOpen && !cart.isClosed">Opens at 8</div>
                <div ng-show="cart.isClosed">Closed</div>
            </div>

        </div>

＆＃13;

＆＃13;

＆＃13;

现在我想实现像

这样的叠加效果

我尝试使用线性背景渐变，但它没有成功。我想在这里提到的一件事是，我的图像是动态设置的。我怎样才能做到这一点？

Answer 1

尝试应用以下css，然后我相信您可以将其应用于代码中的正确元素。

.q-items-container .q-item-info .q-food-info {
    background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,1));
    width: 100%;
}