css图片底部黑色透明背景白色的字这效果怎么实现

如图,求教... 如图,求教 展开
 我来答
百度网友79114b6
2018-01-25 · 超过10用户采纳过TA的回答
知道答主
回答量:19
采纳率:66%
帮助的人:7.3万
展开全部

<!DOCTYPE HTML>
<html>
<head>
  <meta charset= "utf8">
  <title>untitled</title>
  <link rel = "stylesheet" type = "text/css" href = "">
  <style type = "text/css">
  #a{
    width: 500px;
    height: 200px;
    background-image: url('pic.png');
    margin-left: calc((100% - 500px)/2);
    margin-top: 200px;
  }
  #a div{
    position: absolute;
    width: 500px;
    height: 40px;
    background-color: black;
    margin-top: 160px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
  }
</style>
</head>
<body>
    <div id = 'a'>
        <div>白颜色的字</div>
    </div>
  <script type="text/javascript">
    
  </script>
</body>
</html>

#a background-image url 自己修改一下

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式