Question

我目前正在开展一个学校项目。截至目前，我正处于创建产品页面的第一步。我正在使用图像叠加来显示悬停时产品的描述。我的问题是文本没有换行，它继续在容器外面。我将不胜感激任何反馈。谢谢！

＆＃13;

    .container2 {
      position: relative;
      width: 15%;
      height: 15%;
      margin-left: 50px;
        
    }
    
    .image {
      display: block;
      width: 100%;
      height: auto;
    }
    
    .overlay {
      position: absolute;
      bottom: 100%;
      left: 0;
      right: 0;
      background-color: #4CAF50;
      overflow: hidden;
      width: 100%;
      height:0;
      transition: .5s ease;
    }
    
    .container2:hover .overlay {
      bottom: 0;
      height: 100%;
    }
    
    .text {
      white-space: nowrap; 
      color: white;
      font-size: 20px;
      position: absolute;
      overflow: hidden;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }
    
    
    
    
    
    
    
    
    
    
    .container {
        overflow: hidden;
    }
    .column2 {
        float: center;
        margin: 20px;
        background-color: #333;
        padding-bottom: 100%;
        margin-bottom: -100%;
        color: aliceblue;
        font-family: roboto;
    }
    
    .column1 {
        text-align: center;
        float: center;
        margin: 20px;
        background-color: #333;
        padding-bottom: 100%;
        margin-bottom: -100%;
        color:aliceblue;
        font-family: roboto;
    }
    
    
    br {
        text-align: center;
    }
    
    
    
    
    
    a {
        text-decoration: none;
    }
    
    
    
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
        position: fixed;
        top: 0;
        width: 100%;
    }
    
    li {
        float: left;
    }
    
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    
    li a:hover:not(.active) {
        background-color: #111;
    }
    
    li {
        color: darkgreen;
        font-size: 20px;
        font-weight: bold;
    }
    .active {
        background-color: #4CAF50;
    }

＆＃13;

<!DOCTYPE html>
<html>

<head>
	<title>Shopping Page</title>
	<link rel="stylesheet" href="styles.css">
	<link rel="shortcut icon" type="image/png" href="images/favicongreen.png" />

</head>


<body>

	<ul>
		<li>
			<a href="index.html">Home</a>
		</li>
		<li>
			<a class="active" href="products.html">Products</a>
		</li>
		<li>
			<a href="contact.html">Contact</a>
		</li>
		<li>
			<a href="about.html">About</a>
		</li>
		<li>
			<a href="cart.html">Shopping Cart</a>
		</li>
		<li>
			<img src="images/bolt2.png" width="40px" height="40px" />
		</li>

	</ul>

	<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
		<h1>Products</h1>



		<div class="container">

			<div class="column1">
				<br>
				<br>
				<p>
					<b>Electric Energy Electronics Product Index</b>
				</p>
				<br>




				<div class="container2">
					<img src="images/solar.jpg" alt="Avatar" class="image" height="50px" width="50px">
					<div class="overlay">
						<div class="text">250PX Solar Panel
							<br> This solar panel is a great way to harness clean energy from the sun.</div>
					</div>




				</div>

				<div class="column2">
					Shopping cart Div

				</div>

			</div>

		</div>

</body>

</html>

＆＃13;

Answer 1

用此替换你的css .text类。

    .text {
  width: 80%;
  text-align: center;
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

如何在图像叠加层中包装文本

1 个答案: