我在 CSS 中的 :hover 只会影响我的 div/image 的一部分答案

【问题标题】：My :hover in CSS will only affect a pice of my div/image我在 CSS 中的 :hover 只会影响我的 div/image 的一部分
【发布时间】：2020-05-15 10:46:56
【问题描述】：

所以，我被困住了。我一直在试图找出我的代码出了什么问题。当我将鼠标悬停在它上面时，我试图让我的图像变暗一点。我在 CSS 中执行此操作。它有效，但只覆盖了我图像的一半。添加我的文本时，它只会在我的文本下方显示悬停功能，而当我删除文本时，它只会从顶部显示图像的 1/3。

我是菜鸟，希望这对外面的人来说是一个简单的解决方法！

我的html：

<div class="contentbild1">
    <picture><source media="(min-width: 736px)" srcset="Biler/bildtest.jpg" style="width:100%;"><img src="Biler/bildtestmobil.jpg" alt="Trädvård" style="width:100%;"></picture>
    <div class="contentbildtext1">
    <font class="Contenttext">TRÄDVÅRD</font>
    </div>
</div>

还有我的 CSS：

.contentbild1{
  position: relative;
}
.contentbild1:hover > div {
    background-color:rgba(0, 0, 0, 0.3);
    transition: all 1s ease;
}
.contentbildtext1{    
  position: absolute;
  top:0%;
  left:0%;
  width:100%;
  padding-top:5.8%;  
  text-align:center;
    font-family:Palatino,Palatino Linotype,Palatino LT STD,Book Antiqua,Georgia,serif;
    color:orange;
    font-size:200%;
    font-weight: bold;
    text-decoration:none;
}
@media screen and (max-width: 736px){
    .contentbildtext1{
     padding-top:17%;  
    }
}

公平地说，我不太了解，主要是我搜索我想要的东西并找到我需要的代码或函数。这个问题超出了我的范围。也许是因为我的代码一团糟（？）。

我也很难将我的文本定位在中心，也许这在代码中是可见的，无论如何现在它都可以正常工作。

感谢您的帮助！

【问题讨论】：

标签： html css image hover responsive

【解决方案1】：

勾选添加'底部：0;'到 .contentbildtext1 css 类。

  .contentbildtext1{    
    position: absolute;
    top: 0%;
    bottom: 0;
    left: 0%;
    width: 100%;
    padding-top: 5.8%;  
    text-align: center;
    font-family: Palatino,Palatino Linotype,Palatino LT STD,Book Antiqua,Georgia,serif;
    color: orange;
    font-size: 200%;
    font-weight: bold;
    text-decoration: none;
}

【讨论】：

【解决方案2】：

您需要将.contentbild1 设置为黑色，而不仅仅是.contentbild1 > div：

.contentbild1{
  position: relative;
}
.contentbild1:hover {
    background-color:rgba(0, 0, 0, 0.3);
    transition: all 1s ease;
}
.contentbildtext1{    
  position: absolute;
  top:0%;
  left:0%;
  width:100%;
  padding-top:5.8%;  
  text-align:center;
    font-family:Palatino,Palatino Linotype,Palatino LT STD,Book Antiqua,Georgia,serif;
    color:orange;
    font-size:200%;
    font-weight: bold;
    text-decoration:none;
}

@media screen and (max-width: 736px){
    .contentbildtext1{
     padding-top:17%;  
    }
}

<div class="contentbild1">
    <picture><source media="(min-width: 736px)" srcset="Biler/bildtest.jpg" style="width:100%;"><img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Trädvård" style="width:100%;"></picture>
    <div class="contentbildtext1">
    <font class="Contenttext">TRÄDVÅRD</font>
    </div>
</div>

【讨论】：