Question

我正在尝试获取它，以便文本位于图像上方，当您将鼠标悬停在图像上方时，文本块会扩展。例如

这是之前

这是之后

所以我的html是这个。

<a href="rentals.php" class="type"><img src="assets/images/page1_img1.jpg" alt=""><span class="type_caption">Sport</span></a>
<p></p>
<a href="rentals.php" class="type"><img src="assets/images/page1_img2.jpg" alt=""><span class="type_caption">Deluxe</span></a>

现在这里是每个类的CSS。

类类型

    .type {
    border: 1px solid #ebeaea;
    position: relative;
    margin-top: 84px;
    display: block;
    font-family: 'Roboto Condensed', sans-serif;
}

.type_caption {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 312px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    background: url(..bsite/assets/images/capt_bg.png) 0 0 repeat;
    color: #fff;
    font-size: bold;
    font-size: 30px;
    line-height: 30px;
    padding: 7px 30px 8px;
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}

.type:hover .type_caption {
    width: 100%;
}

.type:hover .type_caption {
    width: 100%;
}

.type+.type {
    margin-top: 11px;
}

.type+.type+.type {
    margin-top: 10px;
}

它将显示带有文本的内容，但背景图像从不显示。图像位置是 E：\ xampp \ htdocs \ Bsite \ assets \ images

知道为什么这行不通吗？

这就是我现在得到的。

Answer 1

您的代码似乎可以正常工作。仔细检查您capt_bg.png的路径是否正确。看来您使用的是“ bsite”而不是“ Bsite”。

建议：您的文字上有不透明的黑色背景。您不需要图像即可实现目标。那是不必要的资源负载和HTTP请求。尝试使用CSS属性来实现该目标，例如：

$EventID1 = Import-Csv -Path G:\LabLog.csv | 
  Where-Object { $_.Keywords -like "Audit Success" } | 
    Group-Object EventID |
      Sort-Object Count -Descending |
        Select-Object -ExpandProperty Values -First 1

前三个数字是R，G，B值，最后一个数字是A-Alpha（不透明度）。

Answer 2

希望这会有所帮助：

HTML：

<!-- Container with background image -->
<div id="image-01">

<!-- Container for text -->
  <div id="title">

    <h3>SPORT</h3>

  </div>

</div>

CSS：

/* This removes unwanted margin and padding in jsfiddle, you may not need it */
* {
  margin: 0;
  padding: 0;
}

#image-01 {
  position: relative; /* This is important for positioning the text properly */
  width: 400px;
  height: 200px;
  background: url("https://fraserfree.imgix.net/content/places/Jet-Ski-On-The-Water-Optimized.jpg?w=1740&h=980&fit=crop&crop=center&auto=format"); /* Background image */ 
  background-size: cover;
}

#title {
  position: absolute; /* This is important for positioning the text properly */
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,0.4);
  height: 50px;
  width: 50%; /* Variable, depending on how wide you want the text banner to be */
  line-height: 50px;
  transition: all 250ms ease-out; /* Smooth transition for banner */
}

/* Text styling */
h3 {
  font-family: sans-serif;
  color: #fff;
  font-size: 1.5em;
  float: left;
  margin-left: 8px;
}

/* When you hover over #image-01, animate the width of #title from 50% to 100% */
#image-01:hover #title {
  width: 100%;
}

Answer 3

检查：

   .type {
    border: 1px solid #ebeaea;
    position: relative;
    margin-top: 84px;
    display: block;
    font-family: 'Roboto Condensed', sans-serif;
    max-width: 500px;
}

.type_caption {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 40%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    background: black ;
    color: #fff;
    font-size: bold;
    font-size: 30px;
    line-height: 30px;
    padding: 7px 30px 8px;
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    opacity: 0.7;

}
img{
  width: 100%
}

.type:hover .type_caption {
    width: 100%;
}

     <a href="rentals.php" class="type">
       <img src="http://www.hamarbatsenter.no/assets/Uploads/VANNSCOOTER-1.jpg" alt="">
       <span class="type_caption">Sport</span>
      </a>
<br/>
      <a href="rentals.php" class="type">
       <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWOmtjEGmZH8PEV2YvDQJPSG7ofwBnmcyrXhnrabAjhgcMPlhw6g" alt="">
       <span class="type_caption">Deluxe</span>
      </a>

获取文本以覆盖图像

3 个答案: