如何在图像上制作半透明颜色？

Question

I want to create a semi-transparent color layer where I want to type title and description of image but due to some reason I am not able to make the changes or fulfill my goal.我想创建一个半透明的颜色层，我想在其中输入图像的标题和描述，但由于某种原因，我无法进行更改或实现我的目标。 Can anyone help me to solve the issue?谁能帮我解决这个问题？ I am not able to overlay the transparent layer over image as it is on same card.我无法将透明层覆盖在图像上，因为它在同一张卡上。

I want to create like below image:我想创建如下图：

My HTML code is here:我的 HTML 代码在这里：

 .container{ max-width: none; }.container-fluid, .container-sm, .container-md, .container-lg, .container-xl { padding-right: 0; padding-left: 0; }.card { padding: 10px 0 0 0;important: } section { overflow; hidden. }:row { display; -ms-flexbox: display; flex: -ms-flex-wrap; wrap: flex-wrap; wrap: margin-right; -15px: margin-left; -15px. } [data-aos^=fade][data-aos^=fade]:aos-animate { opacity; 1: transform; translateZ(0). }.card:entry { padding; 20px: margin-bottom; 60px: overflow; hidden: box-shadow; 10px 10px 5px grey: background; #ea8537. }:entry:hover{ background; #ffcc00: transition. 1;2s: transform. scale(1;01), } article, aside, figcaption, figure, footer, header, hgroup, main, nav: section { display; block, } *: :,after: ::before { box-sizing; border-box. }.card.entry:entry-img { max-height; 400px: margin; -20px -20px 20px -20px: overflow; hidden: z-index; -1. }:img-fluid { width; 100%: height; auto: } img { vertical-align; middle: border-style; none. }:img:hover{ opacity. 0;6. }.card.entry:entry-title { font-size; 20px: line-height; 26px: font-weight; bold: padding; 0: margin; 0 0 20px 0. }.card.entry:entry-title a { color; #FFFFFF: transition. 0;3s. }.card.entry:entry-content a { color; #FFFFFF: transition. 0;3s. }.card.entry:entry-meta { margin-bottom; 15px: color; #000. }:align-items-stretch { align-items; stretch:important; max-width: 100%; }

 <section id="card" class="card"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up"> <article class="entry"> <div id="img1" type="image" class="entry-img"> <img src="" alt="" class="img-fluid"> </div> <h2 class="entry-title"> <a href=""> <div id="txt1" type="text"></div> </a> </h2> <div class="entry-content"> <p> <div id="txt2" type="text"></div> </p> </div> </div> </div> </div> </section>

Answer 1

You can use very simple structure like this:您可以使用非常简单的结构，如下所示：

HTML: HTML：

 .wrapper { position: relative; width: 100%; background: url('https://images.unsplash.com/photo-1455582916367-25f75bfc6710?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1055&q=80') center center no-repeat; background-size: cover; height: 500px; }.overlay { position: absolute; bottom: 0; height: 100px; background-color: rgba(0, 0, 0, 0.6); width: 100%; } h3, p { color: white; margin: 0; margin-bottom: 10px; margin-left: 10px; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="wrapper"> <div class="overlay"> <h3>This is the title</h3> <p>This is the main content</p> </div> </div> </body> </html>

如何在图像上制作半透明颜色？

问题描述

1 个解决方案

解决方案1
0 2020-12-11 06:54:57

如何在图像上制作半透明颜色？

问题描述

1 个解决方案

解决方案1 0 2020-12-11 06:54:57

解决方案1
0 2020-12-11 06:54:57