Question

类似的叠加层

下面是我的代码段

<html lang="en">

<head>
    <!-- Theme Made By www.w3schools.com - No Copyright -->
    <title>Demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>

<body>
    <div class="col-sm-4 img-holder ">
   <img src="http://foundry.mediumra.re/img/chooser/agency-2.png" class="img-thumbnail imge" alt="agency-2" width="400" height="300">
      </div>
                
 </body>
 </html>

`

Answer 1

将文本的bacground设置为css，如下所示：

background-image: linear-gradient(to right, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.26)),url(<image_path>));

在这里你可以改变rgba的alpha值来相应地改变黑色阴影，并且是背景图像路径。

因为我在线性渐变中传递了两个值rgba，所以保持它们相同。如果你想要统一的背景。

这是您的工作代码。

<html lang="en">

<head>

    <title>Demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Jua" rel="stylesheet">

    <style>
        .img-holder{
            background-image: url(http://foundry.mediumra.re/img/chooser/agency-2.png);
            background-repeat: no-repeat;
            width: 500px;
            height: 300px;
        }
        .img-holder:hover{
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)), url(http://foundry.mediumra.re/img/chooser/agency-2.png);
        }
        .img-holder p{            color:white;
            font-family: 'Jua', sans-serif;
            text-align: center;
            padding-top: 150px;
            font-size: 0px;
            transition-duration: .1s;
            
        }
        .img-holder:hover p{
           font-size: 50px;
        }
    </style>
 </head>

<body>
    <div class="col-sm-4 img-holder ">
        <p>I am Rajat</p>
      </div>         
 </body>
 </html>

Answer 2

＆＃13;

df$a <- c(1,1,0,0,1)
df$b <- c(1,1,0,1,0)
df$c <- c(1,1,0,0,0)
df$d <- c(1,0,0,1,0)
df$e <- c(1,0,1,0,1)
df$f <- c(1,0,1,0,0)

> df
           V1 a b c d e f
1 a,b,c,d,e,f 1 1 1 1 1 1
2       a,b,c 1 1 1 0 0 0
3         e,f 0 0 0 0 1 1
4         b,d 0 1 0 1 0 0
5         a,e 1 0 0 0 1 0

＆＃13;

Answer 3

.container {
  position: relative;
  width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  height: 0;
}

.container:hover .middle {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.5);
  top: 50%;
  left: 50%;
  height: 100%;
}

.text-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.text {
  color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
  padding: 16px 32px;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

  <p>Hover over the image to see the effect.</p>

  <div class="container">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image" style="width:100%">
    <div class="middle">
      <div class="text-wrapper">
        <div class="text">John Doe</div>
      </div>
    </div>
  </div>

</body>

</html>

如何在图像上创建一个暗透明叠加层，上面有文字

3 个答案: