我目前正在建立一个网站。从本地Mac或本地网站上的Firefox,Chrome或Safari浏览时,一切正常。
但是,当我在手机上查看实时网站时,家里的照片,关于和推荐的行为很奇怪,我什至看不到什么图像。但是,当从我的浏览器设备查看相同的实时网站时,根本没有问题。
我已附上图片的外观。这是我的https://s3.amazonaws.com/softuniv/index.html。
这就是我期望的渲染效果enter image description here 这是我的代码:
# Home section or header:
<section id="home">
<div id="home-cover" class="bg-parallax animated fadeIn">
<div id="home-content-box">
<div id="home-content-box-inner" class="text-center">
<div id="home-heading" class="animated zoomIn">
<h3>You have got <span id="ideas">ideas?</span> ?<br>We turn them into <span id="reality">reality</span></h3>
</div>
<div id="home-btn" class="animated zoomIn">
<a class="btn btn-lg btn-general btn-white smooth-scroll" href="#about" role="button" title="View Our portfolio">About us</a>
</div>
</div>
</div>
</div>
</section>
和
# Testimonial Section
<section id="testimonials">
<div id="testimonials-cover" class="bg-parallax">
<div class="content-box">
<div class="content-title content-title-white wow animated fadeInDown" data-wow-duration="1s" data-wow-delay=".5s">
<h3> What Our Customers Say </h3>
<div class="content-title-underline"></div>
</div>
<div class="container">
<div class="row wow animated bounceInDown" data-wow-duration="1s" data-wow-delay=".5s">
<div class="col-md-12">
<div id="customers-testimonials" class="text-center owl-carousel owl-theme">
<div class="testimonial">
<img src="img/client/client-1.jpg" class="img-responsive img-circle" alt="testimonial">
<blockquote class="text-center">
<p>De cernantur concursionibus do incididunt fore nostrud, quibusdam anim quorum ubi quae id aute sed eiusmod ita fore et expetendis irure dolore te legam e do an efflorescere, voluptate quo.</p>
</blockquote>
<div class="testimonial-author">
<p>
<strong> Daniel Watrous </strong>
<span> CEO & Founder - Google </span>
</p>
</div>
</div>
<div class="testimonial">
<img src="img/client/client-2.jpg" class="img-responsive img-circle" alt="client" />
<blockquote class="text-center">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at pulvinar augue. Ut feugiat viverra pellentesque. Integer scelerisque malesuada orci in cursus. Fusce pellentesque urna quis risus rutrum, vitae blandit urna pharetra. Praesent nunc enim, pharetra sed erat nec.</p>
</blockquote>
<div class="testimonial-author">
<p>
<strong>Johan Mathew</strong>
<span>CEO & Founder - Yahoo</span>
</p>
</div>
</div>
<div class="testimonial">
<img src="img/client/client-3.jpg" class="img-responsive img-circle" alt="client" />
<blockquote class="text-center">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at pulvinar augue. Ut feugiat viverra pellentesque. Integer scelerisque malesuada orci in cursus. Fusce pellentesque urna quis risus rutrum, vitae blandit urna pharetra. Praesent nunc enim, pharetra sed erat nec.</p>
</blockquote>
<div class="testimonial-author">
<p>
<strong>Sara Smith</strong>
<span>CEO & Founder - Amazon</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Content Box -->
</div>
</section>
Css相关部分;
#home {
height: 100%;
}
#home-cover {
height: 100%;
width: auto;
background-image: url("../img/01.jpg");
}
#home-content-box {
width: 100%;
height: 100%;
display: table;
background-color: rgba(0, 0, 0, 0.7)
}
#home-content-box-inner {
display: table-cell;
vertical-align: middle;
/* text-align: center; */
}
#home-heading h3 {
color: #fff;
font-size: 55px;
font-weight: 700;
margin: 20px 0 20px 0;
}
#about-bg-diagonal {
width: 60%;
height: 700px;
float: right;
background-image: url(../img/1.jpg);
border-left: 200px solid #fff;
border-top: 700px solid transparent;
}
#testimonials-cover {
background-image: url("../img/testimonial.jpg");
}
#testimonials .content-box {
background-color: rgba(0, 0, 0, 0.7);
}
#customers-testimonials {
padding: 50px 0;
}
.testimonial img {
max-width: 120px;
margin: 0 auto 0 auto;
}