个人中心
gpt4 book ai didi

HTML 背景图像与顶部内容混淆

转载 作者：行者123 更新时间：2023-11-28 07:13:47 24 4
gpt4 key购买 nike

因此，我使用此背景图片与网站的品牌包保持一致，并按以下方式进行设置:

html { 
    background: url(../img/GreyWeavePaper-Portrait.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

但是当我通过 html 添加图像时(它是 .png 格式并且在背景上是透明的)，它会附带一个大的白色 strip 。为了解决这个问题，我通过以下方式在 CSS 中将主体设置为背景:

body {
    background: url(../img/GreyWeavePaper-Portrait.jpg) no-repeat center center fixed; 
    margin-top: 80px;
    font-family: 'passport', sans-serif;
    color: #000;
}

这是结果: enter image description here

如您所见，图像顶部是使用 html 设置的背景， Logo 所在的位置是使用正文设置背景的位置。有人可以帮我设置这个背景吗？当我在上面有内容时，它就像在这张图片的顶部一样？

图片尺寸为 300x150

@import url(../fonts/VINCHAND.ttf);
@import url(../fonts/Passport.ttf);

/*!
Main Page CSS || Created By Thomas Withers @ Ice7Media
 */

/* Global Styles
============================================================ */
html { 
  background: url(../img/GreyWeavePaper-Portrait.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
    padding-top: 50px;
    background: url(../img/GreyWeavePaper-Portrait.jpg) no-repeat center center fixed; 
    font-family: 'passport', sans-serif;
    color: #000;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'passport', 'Open Sans', sans-serif;
    color: #000;
}

p {
    font-family: 'passport', sans-serif;
    color: #000;
}

#topnavbar {
    margin: 0;
}
#topnavbar.affix {
    position: fixed;
    top: 0;
    width: 100%;
}
.banner {
    padding-bottom: 50px;
}

.banner img {
    display: block;
    margin-left: auto;
    margin-right: auto
}
<!DOCTYPE html>
<html lang="en">

<head>

<!-- Meta charset 
===================================================================================-->
        <meta charset="utf-8">

<!-- Title  
===================================================================================-->
        <title>Bocaditio | South Amercian Dishes</title>

<!-- Meta Tags  
===================================================================================-->
        <meta name="author" content="Thomas Withers @ Ice7Media">
        <meta name="description" content="Social Media Wizzards that handle all of your social media markerting.">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <!-- CSS Stylesheets  
===================================================================================-->
        <link href = "css/bootstrap.min.css" rel = "stylesheet">
        <link href = "css/new_Custom.css" rel = "stylesheet">
        <link href = "css/Mapstyle.css" rel = "stylesheet">
        <link rel="stylesheet" href="css/animate.css">
        <link rel="shortcut icon" href="img/iceBox.png">

<!-- Custom Fonts 
===================================================================================-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab">
        <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
    </head>

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

<!-- Logo Section 
===================================================================================-->
    <section class="banner" id="banner">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <img src="img/BocaditoLogo_113x300.png">
                </div>
            </div>
        </div>
    </section>

<!-- Navigation
===================================================================================-->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" id="MainNav">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">          
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Nav 1</a></li>
                    <li><a href="#">Nav 2</a></li>
                    <li><a href="#">Nav 3</a></li>
                    <li><a href="#">Nav 4</a></li>
                </ul> 
            </div><!-- /.navbar-collapse -->
        </div><!-- container-fluid -->
    </nav>
<!-- Full screen Slider    
===================================================================================--> 
<!-- Welcome Message
===================================================================================--> 
<!-- Latest Blog Post
===================================================================================-->
<!-- Three Images
===================================================================================-->
<!-- Map & Conatct
===================================================================================-->
<!-- Footer
===================================================================================-->
<!-- Scripts
===================================================================================-->
    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC22aNgIjcYzx5Oel1m0Jtcem-W4R895fQ"></script>
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/fix-nav.js"></script>
    <script src="js/main.js"></script>
    <script>
    $('.carousel').carousel({
        interval: 5000 //changes the speed
    })
    </script>
</body>

</html>

感谢任何帮助

最佳答案

如果我没理解错的话，您想将背景放在 body 上，将 background-size 放在 html 上。
但这也需要您将 no-repeat 更改为 repeat，这将导致页面平铺该图像:

html { 
    background: url(http://lorempixel.com/g/150/300/) repeat center center fixed;
}
body {
    margin-top: 80px;
    font-family: 'passport', sans-serif;
    color: #000;
}
<!DOCTYPE html>
<html>
    <body>
        Test
    </body>
</html>

如果只想垂直重复图像，请改用repeat-y 并设置background-size: 100% auto;:

html { 
    background: url(http://lorempixel.com/g/150/300/) repeat-y center center fixed;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
}
body {
    margin-top: 80px;
    font-family: 'passport', sans-serif;
    color: #000;
}
<!DOCTYPE html>
<html>
    <body>
        Test
    </body>
</html>

关于HTML 背景图像与顶部内容混淆，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32476202/

24 4 0
文章推荐： c++ - 使用 STK 和 FMVoices 类的内存访问错误
文章推荐： javascript - JavaScript 中点击事件触发之前先触发模糊事件
文章推荐： javascript - Page_ClientValidate 不是一个函数
文章推荐： javascript - FacebookConnectPlugin。登录返回错误 "Session: an attempt was made to request new permissions for a session that has a pending request"
行者123
个人简介

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

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