个人中心
gpt4 book ai didi

css - 图像在较小的屏幕上显示不正确

转载 作者：行者123 更新时间：2023-11-28 01:25:53 26 4
gpt4 key购买 nike

我正在尝试创建一个响应式网站，但我被困在一个地方，带有背景图像 mask 的图像无法正常工作。它在大屏幕上运行良好，但在中小屏幕上我的标题和一些图像在“蒙版”背景图像中看不到。那么你能告诉我我在哪里犯了错误吗？是我做错了编码还是方法？

显示画面的图片在本页底部，大屏看没问题，其他屏看不到标题，只显示一半，背景不拉伸(stretch)覆盖所有图片和标题!!!

enter link description here这是网站。您可以更好地了解问题所在。

<!-- SCRIPTS -->
    <!-- JQuery -->
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="js/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="js/mdb.min.js"></script>
    <!--Menü scroll change color-->
<script>
    $(document).ready(function(){
  $(window).scroll(function(){
  	var scroll = $(window).scrollTop();
	  if (scroll > 10) {
	      $(".navbar").css("background", "black");
	  }

	  else{
	      $(".navbar").css("background", "transparent");
	  }
  })
})
    </script>
    <!--Menü scroll change color-->
html,
body,
header,
#intro {
    height: 100%;
    
}

#intro {
    background:  url('../img/fft99_mf5629880.Jpeg') no-repeat center center fixed ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family:Arial;
}



.navbar-brand{
    font-family:      Gabriola;
    font-size:35px;
padding-top:10px;    
    
}

.navbar-nav li a  {
  color:white !important;
  font-family:   'Kristen ITC';
}

.fixed-top .navbar-nav  li a:hover {
    color: red !important;
}

.fixed-top .navbar-nav  li  a:focus {
    color: red !important;
}




.fixed-top.scrolled {
  background-color: #fff !important;
  transition: background-color 200ms linear;
}

 .fixed-top.scrolled .navbar-nav   li a  {
  color:red !important;
}


 .fixed-top.scrolled .navbar-nav   li a:hover {
    color: red !important;
} 




 .float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
	margin-top:16px;
}
 
<!DOCTYPE html>
<html lang="tr">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Avrupa Hayalleri - Avrupa'yı Görme Hayalleriniz Gerçek Olsun</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="css/mdb.min.css" rel="stylesheet">
    <!-- Your custom styles (optional) -->
    <link href="css/style.css" rel="stylesheet">

    <link rel="stylesheet" href="css/ihover.css" >


</head>

<body>

    


    <!--Main Navigation-->
<header>
    
    <!--Navbar-->
    <nav  class="navbar navbar-expand-lg navbar-dark  fixed-top  ">
        <div class="container">

            <!-- Navbar brand -->
            <a class="navbar-brand red-text" href="#">BATU PARFÜM</a>

            <!-- Collapse button -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>

            <!-- Collapsible content -->
            <div class="collapse navbar-collapse" id="navbarSupportedContent">

                <!-- Links -->
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item ">
                        <a class="nav-link" href="#">Anasayfa <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Bayan Parfüm</a>
                    </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">Erkek Parfüm</a>
                    </li>
                         <li class="nav-item">
                        <a class="nav-link" href="#">Unisex Parfüm</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">İletişim</a>
                    </li>


                </ul>
                <!-- Links -->

                <!-- Social Icon  -->
<ul class="navbar-nav nav-flex-icons ">
    <li class="nav-item">
     <!--   <a class="nav-link"><i class="fa fa-whatsapp fa-2x green-text "></i>0533 645 89 42</a>  -->
        <a class="nav-link" href="https://api.whatsapp.com/send?phone=905382392398"><i class="fa fa-whatsapp fa-2x green-text "> </i>0538 239 23 98 </a>
    </li>
</ul>
            </div>
            <!-- Collapsible content -->

        </div>
    </nav>
    <!--/.Navbar-->





    <!--Mask-->
<div  id="intro" class="view hm-black-strong  container-fluid ">
        
    <div class="container-fluid full-bg-img d-flex  align-items-center        justify-content-center   ">

        <div class="row container-fluid d-flex align-items-center     justify-content-center">

            <div class=" col-lg-8 col-md-8  col-sm-8  text-center ">
                 <hr class="hr-light   ">
                <!-- Heading -->
                <h1 class=" font-bold  mb-2       white-text">Kokunu Keşfet</h1>
                               <!-- Divider -->
                <hr class="hr-light pt-2   ">
                </div>
            

               <!--Grid row-->
    <div class="row col-lg-8 col-md-8  col-sm-8 container-fluid  text-center mt-5">

        <!-- Top to Bottom-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-8 col-sm-8 mb-4   ">
            <h2 class="mb-4 font-weight-bold  white-text ">Unisex Parfüm</h2>
            <div class="view overlay hm-white-slight z-depth-1-half">
              <img src="img/perfume1.jpg" class="img-fluid" alt=""  style="border:3px solid white; ">
              <div class="mask"></div>
          </div>         
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-8 col-sm-8 mb-4">
                        <h2 class="mb-4 font-weight-bold  white-text">Bayan Parfüm</h2>
            <div class="view overlay hm-white-slight z-depth-1-half">
              <img src="img/f484004e6a670c4a5827535756317ba7a.jpg" class="img-fluid" alt="" style="border:3px solid white; " >
              <div class="mask"></div>
          </div>

      
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-8 col-sm-8 mb-4">
                        <h2 class="mb-4 font-weight-bold  white-text">Erkek Parfüm</h2>
            <div class="view overlay hm-white-slight z-depth-1-half">
              <img src="img/e9feb436d5ed39c882d93ac8fc207e82a.jpg" class="img-fluid" alt="" style="border:3px solid white; ">
              <div class="mask"></div>
          </div>

            </div>
   
        
        
        <!--Grid column-->
        </div>
    
    <!--Grid row-->
             </div>
      </div>
  </div>
<!--/.Mask-->

</header>
<!--Main Navigation-->
</body>

</html>

small screen

medium screen

large screen

最佳答案

您可以对较小的屏幕使用媒体查询。试试这个适用于手机的 css:

header{
    height: auto;
}
#intro{
    padding: 0;
    height: auto;
}
.full-bg-img{
    position: relative;
}

关于css - 图像在较小的屏幕上显示不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51250364/

26 4 0
文章推荐： html - 使用 CSS 裁剪和拉伸(stretch)图像以填充页面
文章推荐： c++ - 为什么在同一输入上调用 std::getline() n 次会传递第 n 次标记化？
文章推荐： C++ -Weffc++ 警告与指针
文章推荐： javascript - self 反射(reflection)问卷: providing three different scores for a quiz
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com