markdown 半透明覆盖图像

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了markdown 半透明覆盖图像相关的知识，希望对你有一定的参考价值。

# Semi Transaparent Overlay Over An Image

[SOURCE](https://stackoverflow.com/a/26481484/1602807)

```css
<html>
    <div class="outer">
        <img src="http://placekitten.com/g/200/300">                    
            <div class="overlay">
                <p class="text">x</p>
            </div>
    </div>
</html>
<style>
.outer {
    position:relative;
    width: 200px;
    height: 300px;
}
.overlay {                      
    display: none;  
}

.outer:hover .overlay { 
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.7;
    top: 0;
}
.text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
    color:white;
}
</style> 
```

以上是关于markdown 半透明覆盖图像的主要内容，如果未能解决你的问题，请参考以下文章

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

基本 CSS - 如何在顶部覆盖带有半透明 DIV 的 DIV

具有半透明背景的 Python Bokeh Hovertool

在 C/C++ 中用 alpha 值覆盖像素

Android：半透明覆盖？

推送视图控制器中的半透明导航栏覆盖？