css - 背景图像和颜色在一起

标签 css

<分区>

我如何给一个 div 一个背景图像然后让它变暗一点,当我悬停在 div 上时我想要更暗的删除

<div id="bg">
   <h1>Cat</h1>
</div>

CSS:

    #bg{
      height: 200px;
      width: 200px;
      background: rgba(0,0,0,0.7) url(http://i.imgur.com/IMiabf0.jpg) ;
      background-size: cover;
      color: red
    }
    #bg:hover{
     background:url(http://i.imgur.com/IMiabf0.jpg) ;
    }

最佳答案

试试这个:

#bg{
  height: 200px;
  width: 200px;
  background:linear-gradient(rgba(0,0,0, 0.7), rgba(0,0,0, 0.7)), url(http://i.imgur.com/IMiabf0.jpg) ;
  background-size: cover;
  color: red
}
#bg:hover{
  background:url(http://i.imgur.com/IMiabf0.jpg) ;
  background-size: cover;
}

关于css - 背景图像和颜色在一起,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34567752/

上一篇:javascript - 单击更改 CSS 背景图像 - while 循环不起作用

下一篇:javascript - 使用 ngIf 切换子标题时如何调整 Ionic 主要内容的大小

相关文章:

javascript - 英雄轮播自动导航

css - div 底部 float - css

html - 缩小时文本变长

php - 从数据库中检索值并显示在工具提示中

html - 当我使用 CSS3 按下按钮时,将文本输入设置为焦点

css - 显示 : none in &lt;iframe&gt; specific element

css - 对于重复(后备)属性,如何评估 CSS 规则?

html - 具有 100% 视口(viewport)宽度的 flex-wrap 元素不会在 chrome 移动模拟器上出现 100%

html - 为什么在某些 div 段旁边有一个空白区域,从而在右侧创建了一个不必要的滚动选项?

css - 删除默认填充后,bootstrap 4 容器流体不是全宽