Question

我试图让这些图像在手机上显示时没有运气。它们以chrome格式显示，并且显示在网站的另一页上，并且可以在台式机和移动设备上正常显示。但是当涉及到这两个部分时，图像不会在移动设备上显示。

我已经在第二部分中尝试将图像放置在div中并将其用作背景图像，图像尺寸在移动设备上显示，但图像没有显示。第一部分仅显示替代文本。

.civils-product {
  background-color: #ccc;
border-radius: 2%;
width: 80%;
margin: auto;
text-decoration: none;
}

.civils-product:last-of-type {
  margin-bottom: 50px;
}

.civils-product-box {
  border-radius: 2% 2% 0 0;
  flex-direction: column;
  margin: 25px auto -2px auto;
  width: 100%;
  overflow: hidden;
}
 
.civils-product-box img {
  position: relative;
  left: -40px;
  margin-bottom: -2px;
  width: 125%;
  transition: 0.2s;
} 

.civils-product-box img:hover {
  position: relative;
  filter: brightness(70%);
  left: -40px;
  margin-bottom: -2px;
  width: 120%;
  transition: 0.2s;
} 

.civil-works-photo {
  background-image: url(/resources/img/temps/civil-1.jpg);
  width: 100%;
  height: 250px;
}

<section class="civils-product">
      <a href="contact.html">
        <div class="civils-product-box">
          <img src="/resources/img/temps/fencing-1.jpg" alt="jkjkljhg" />
        </div>
        <div class="civils-product-title"><h5>Civil Works</h5></div>
        <p>
          See More
        </p>
      </a>
    </section>

<section class="civils-product">
      <a href="contact.html">
        <div class="civils-product-box civil-works-photo">
        </div>
        <div class="civils-product-title"><h5>Civil Works</h5></div>
        <p>
          See More
        </p>
      </a>
    </section>

Answer 1

您应该将背景图像添加到.civil-works-photo { 背景重复：不重复；背景大小：100％100％;}

.civils-product {
  background-color: #ccc;
border-radius: 2%;
width: 80%;
margin: auto;
text-decoration: none;
}

.civils-product:last-of-type {
  margin-bottom: 50px;
}

.civils-product-box {
  border-radius: 2% 2% 0 0;
  flex-direction: column;
  margin: 25px auto -2px auto;
  width: 100%;
  overflow: hidden;
}
 
.civils-product-box img {
  position: relative;
  left: -40px;
  margin-bottom: -2px;
  width: 125%;
  transition: 0.2s;
} 

.civils-product-box img:hover {
  position: relative;
  filter: brightness(70%);
  left: -40px;
  margin-bottom: -2px;
  width: 120%;
  transition: 0.2s;
} 

.civil-works-photo {
  background-image: url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg);
  background-repeat:no-repeat;
  background-size:100% 100%;
  width: 100%;
  height: 250px;
}

<section class="civils-product">
      <a href="contact.html">
        <div class="civils-product-box">
          <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="jkjkljhg" />
        </div>
        <div class="civils-product-title"><h5>Civil Works</h5></div>
        <p>
          See More
        </p>
      </a>
    </section>

<section class="civils-product">
      <a href="contact.html">
        <div class="civils-product-box civil-works-photo">
        </div>
        <div class="civils-product-title"><h5>Civil Works</h5></div>
        <p>
          See More
        </p>
      </a>
    </section>

图片未显示在移动设备上

1 个答案: