html - 为图像上的文本提供背景阴影

标签 html css

我们的网站中有如下图片

enter image description here

在我们显示文本的图像底部,我们想为该文本提供背景阴影,如下所示:

enter image description here

.fanbook-img img {
    width: 100% !important;
}

    img {
        display: block;
    }

    , *:before, *:after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

最佳答案

HTML -

<div id="img"><div id="text"><p>text </p></div><div>

CSS-

#img{
background-image: url('');
}
#text{
background-color: rgba(?,?,?,0.5);
padding: 10px 10px;
margin: 0 ;
}

关于html - 为图像上的文本提供背景阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37859795/

相关文章:

javascript - react CSSTransition 不动画

html - float div 和绝对定位 div 下方的 div 会导致额外的边距 - 为什么?

html - 元素应占用可用的水平空间并在必要时中断

javascript - HTML5 视频在特定类别时自动播放和自动停止

html - Mobile Web App : &lt;header&gt; vs <div data-role ="header">. 有什么区别?

javascript - 如何将 JavaScript 函数传递给 INPUT HTML 标记

javascript - 浏览器持久滚动位置

html - 为什么在后代元素上设置填充会减小内容框的宽度?

javascript - 无法动态设置文本区域的高度

javascript - 带有淡入淡出动画的自动照片 slider - 仅限 JavaScript