如何使用文本在图像上方创建透明的暗覆盖？

时间：2017-08-22 05:25:53

标签： javascript html css css3 css-transitions

我希望在图像上方创建一个带文字的透明暗图像叠加层。在悬停时有一个很好的过渡。

.study1 {
  background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
  height: 300px;
  width: 400px;
}

.title {
  margin: 0 auto;
  width: 60%;
  display: block;
  font-size: 1.25em;
  color: #ccc;
  text-align: center;
padding-top: 120px;
}
<div class="study1">

  <div class="">
    <a class="title" href="#">View Case Study</a>
  </div>
</div>

我想要的设计是：

the design I wanted is this

7 个答案:

答案 0 :(得分：2)

.study1 {
  background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
  height: 300px;
  width: 400px;
  position:relative;
  z-index:1;
}
.study1:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  z-index:-1;
}

.title {
  margin: 0 auto;
  width: 60%;
  display: block;
  font-size: 1.25em;
  color: #ccc;
  text-align: center;
padding-top: 120px;
}
.transparent-dark {
      background: rgba(0, 0, 0, 0.5);
      
      height:100%;
      
    }
<div class="study1">

  <div class="transparent-dark">
    <a class="title" href="#">View Case Study</a>
  </div>
</div>

答案 1 :(得分：1)

见下文。使用:after伪代码，背景设置为不透明度0.在悬停时，不透明度将更改为0.3，持续时间为1秒。

＆＃13;
＆＃13; 
.study1 {
  background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
  height: 300px;
  width: 400px;
  position: relative;
}

.study1:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 1s ease;
}

.study1:hover:after {
  background: rgba(0, 0, 0, 0.3);
}

.title {
  margin: 0 auto;
  width: 60%;
  display: block;
  font-size: 1.25em;
  color: #ccc;
  text-align: center;
  padding-top: 120px;
}
＆＃13; 
<div class="study1">
  <div class="">
    <a class="title" href="#">View Case Study</a>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

使用此代码

＆＃13;
＆＃13; 
.study1 {
  background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
  height: 300px;
  width: 400px;
  position:relative;
  z-index:1;
}
.study1:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  z-index:-1;
  -webkit-transform:scale(0);
  transform:scale(0);
  -webkit-transition:0.5s;
  transition:0.5s
}
.study1:hover:after{
   -webkit-transform:scale(1);
  transform:scale(1);
}

.title {
  margin: 0 auto;
  width: 60%;
  display: block;
  font-size: 1.25em;
  color: #ccc;
  text-align: center;
padding-top: 120px;
}
＆＃13; 
<div class="study1">

  <div class="">
    <a class="title" href="#">View Case Study</a>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

使用js小提琴中提到的类.wrapper设置透明暗图像叠加，设置位置：相对于.study1并相应地定位其他元素。

Here是js小提琴。

答案 4 :(得分：1)

这可能符合您的目的

＆＃13;
＆＃13; 
2017-08-22 04:23:19.700  CFY <manager> [rest_service_cyd4of.start] Task started 'fabric_plugin.tasks.run_script'
2017-08-22 04:23:20.506  LOG <manager> [rest_service_cyd4of.start] INFO: Starting Cloudify REST Service...
2017-08-22 04:23:21.011  LOG <manager> [rest_service_cyd4of.start] INFO: Verifying Rest service is running...
2017-08-22 04:23:21.403  LOG <manager> [rest_service_cyd4of.start] INFO: Verifying Rest service is working as expected...
2017-08-22 04:23:21.575  LOG <manager> [rest_service_cyd4of.start] WARNING: <urlopen error [Errno 111] Connection refused>, Retrying in 3 seconds...
2017-08-22 04:23:24.691  LOG <manager> [rest_service_cyd4of.start] WARNING: <urlopen error [Errno 111] Connection refused>, Retrying in 6 seconds...
2017-08-22 04:23:30.815  LOG <manager> [rest_service_cyd4of.start] WARNING: <urlopen error [Errno 111] Connection refused>, Retrying in 12 seconds...
[10.0.2.15] out: restservice error: http: //127.0.0.1:8100: <urlopen error [Errno 111] Connection refused>
[10.0.2.15] out: Traceback (most recent call last):
[10.0.2.15] out:   File "/tmp/cloudify-ctx/scripts/tmp4BXh2m-start.py-VHYZP1K3", line 71, in <module>
[10.0.2.15] out:     verify_restservice(restservice_url)
[10.0.2.15] out:   File "/tmp/cloudify-ctx/scripts/tmp4BXh2m-start.py-VHYZP1K3", line 34, in verify_restservice
[10.0.2.15] out:     utils.verify_service_http(SERVICE_NAME, url, headers=headers)
[10.0.2.15] out:   File "/tmp/cloudify-ctx/scripts/utils.py", line 1734, in verify_service_http
[10.0.2.15] out:     ctx.abort_operation('{0} error: {1}: {2}'.format(service_name, url, e))
[10.0.2.15] out:   File "/tmp/cloudify-ctx/cloudify.py", line 233, in abort_operation
[10.0.2.15] out:     subprocess.check_call(cmd)
[10.0.2.15] out:   File "/usr/lib64/python2.7/subprocess.py", line 542, in check_call
[10.0.2.15] out:     raise CalledProcessError(retcode, cmd)
[10.0.2.15] out: subprocess.CalledProcessError: Command '['ctx', 'abort_operation', 'restservice error: http: //127.0.0.1:8100: <urlopen error [Errno 111] Connection refused>']' returned non-zero exit status 1
[10.0.2.15] out: 

Fatal error: run() received nonzero return code 1 while executing!

Requested: source /tmp/cloudify-ctx/scripts/env-tmp4BXh2m-start.py-VHYZP1K3 && /tmp/cloudify-ctx/scripts/tmp4BXh2m-start.py-VHYZP1K3
Executed: /bin/bash -l -c "cd /tmp/cloudify-ctx/work && source /tmp/cloudify-ctx/scripts/env-tmp4BXh2m-start.py-VHYZP1K3 && /tmp/cloudify-ctx/scripts/tmp4BXh2m-start.py-VHYZP1K3"
＆＃13; 
.image {
    position:relative;
    width:200px;
    height:200px;
}
.image img {
    width:100%;
    vertical-align:top;
}
.image:after {
    content: attr(data-content);
    color:#fff;
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:hover:after {
    opacity:1;
}
＆＃13;
＆＃13;
＆＃13;

有关详细信息，请转到here https://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css

答案 5 :(得分：1)

.study1 {
  background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
  height: 300px;
  width: 400px;
  position: relative;
}
.action {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.4);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}
.study1:hover .action {
	height: 100%;
}
.title {
   white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
<div class="study1">

  <div class="action">
    <a class="title" href="#">View Case Study</a>
  </div>
 </div>

我认为它可以满足您的要求。一个整洁的过渡。

答案 6 :(得分：0)

＆＃13;
＆＃13; 
.container {
  display: flex;
  position: relative;
  border: 1px solid: #ddd;
  width: 300px;
  height: 300px;
}
.overlay {
  position: absolute;
  left: 0;
  padding: 20px;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(127, 127, 127, 0.6);
  transition: all 0.3s ease;
}
.content {
  width: 300px;
  height: 300px;
  background-image: url('http://mays.tamu.edu/citycentre/wp-content/uploads/sites/44/2015/07/pmbaclass.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.text {
  font-size: 25px;
  text-transform: uppercase;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  text-align: center;
  transition: all 0.8s ease;
}
.overlay:hover .text {
  transform: scale(1.2, 1.2);
}
＆＃13; 
<div class="container">
  <div class="overlay">
    <span class="text">The World's finest developers</span>
  </div>
  <div class="content">
  </div>  
</div>
＆＃13;
＆＃13;
＆＃13;

根据您的要求，这是一个片段。

相关问题
最新问题