如何使用文本在圖像上方創建透明的暗覆蓋？

Question

我希望在文本上方創建一個透明的暗圖像覆蓋圖像。 在懸停時有一個很好的過渡。

 .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> 

我想要的設計是這樣的：

Answer 1

 .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> 

Answer 2

見下文。 使用:after偽代碼后，背景設置為不透明度0.在懸停時，不透明度將變為0.3，持續時間為1秒。

 .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; } 

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

Answer 3

使用此代碼

 .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; } 

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

Answer 4

使用js小提琴中提到的類.wrapper設置透明暗圖像疊加，設置位置：相對於.study1並相應地定位其他元素。

這是js小提琴。

Answer 5

這可能符合您的目的

 .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; } 

 <div data-content="Here is some text added on hover via a content value of attr(data-content)" class="image"> <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" /> </div> 

欲了解更多詳情，請訪問https://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css

Answer 6

 .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> 

我認為它可以滿足您的要求。 一個整潔的過渡。

Answer 7

 .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); } 

 <div class="container"> <div class="overlay"> <span class="text">The World's finest developers</span> </div> <div class="content"> </div> </div> 

這是根據您的要求的片段。