更新

Question

当我在我的身体标签上使用线性渐变时，即使我已将其设置为no-repeat，它也在重复。如下图所示：

问题如何阻止线性渐变在标记背景中重复？

CSS

html, body {
    height: 100% !important;
}

body {
    background: linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.header {
    background: #FFFFFF;
    width: 100%;
    padding: 2em;
}

.wrapper {
    background: #F0F0F0;
    min-height: 600px;
    border-radius: 0.5em;
}

@media (max-width: 968px) {
    .text-mobile {
        text-align: center !important;
    }
}

.card {
    box-shadow: 0 0 4px 0 rgba(0,0,0,.08), 0 2px 4px 0 rgba(0,0,0,.12);
    border-radius: 3px;
    background: #fff;
}

.card-title {
    padding-bottom: 20px;
    border-bottom: 1px solid #DEDEDE;
}

.bg-blue {
    background: #161e2c;

}

.nav-link {
    color: #fff !important;
}

@media (min-width: 768px) {
    .navbar-nav .nav-item {
        float: left;
        position: relative;
    }

    .navbar-nav .nav-item.active:after {
        border-bottom: 5px solid #0087e0;
        bottom: -8px;
        content: " ";
        left: 0;
        position: absolute;
        right: 0;
    }
}

.footer {
    border-top: 2px solid #0087e0;
    margin-top: 3em;
    background: #161e2c;
    width: 100%;
    padding: 2em;
    color: #fff !important;
}

.footer h3 {
    font-size: 18px;
    font-weight: bolder;
}

.footer a {
    text-decoration: none;
    color: #FFFFFF;
}

.footer hr{
   border: 1px solid #0087e0;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <title><?php echo $title;?></title>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/plugins/bootstrap/css/bootstrap.css');?>">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/jquery/jquery-ui/jquery-ui.min.css');?>">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/jquery/jquery-ui/jquery-ui.theme.css');?>">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/jquery/jquery-ui/jquery-ui.structure.css');?>">    
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/stylesheet.css');?>">
    <script type="text/javascript" src="<?php echo base_url('assets/jquery/jquery-3.2.1.js');?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/jquery/jquery-ui/jquery-ui.js');?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/jquery/popper.min.js');?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/plugins/bootstrap/js/bootstrap.js');?>"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script>
</head>
<body>

<div class="header">
    <div class="container">
        <div class="row">
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 text-left mb-2 text-mobile">
                <h3><?php echo $logo;?></h3>
            </div>
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 text-right mb-2 text-mobile">
                <a href="<?php echo base_url('admin');?>" role="button" class="btn btn-dark">Admin Login</a>
            </div>
        </div>
    </div>
</div>

<nav class="navbar navbar-expand-lg bg-blue mb-3">
<div class="container">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <i class="fa fa-bars text-white" aria-hidden="true"></i>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">

            <li class="nav-item <?php echo $active_home;?>">
            <a class="nav-link" href="<?php echo base_url();?>">Home <span class="sr-only">(current)</span></a>
            </li>

            <li class="nav-item <?php echo $active_about;?>">
            <a class="nav-link" href="<?php echo base_url('about');?>">About</a>
            </li>

            <li class="nav-item <?php echo $active_contact;?>">
            <a class="nav-link" href="<?php echo base_url('contact');?>">Contact</a>
            </li>

            <li class="nav-item <?php echo $active_events;?>">
            <a class="nav-link" href="<?php echo base_url('events');?>">Events</a>
            </li>           

            <li class="nav-item <?php echo $active_gallery;?>">
            <a class="nav-link" href="<?php echo base_url('gallery');?>">Gallery</a>
            </li>   

        </ul>
        <form class="form-inline my-2 my-lg-0">
            <?php echo form_input('search_events', '', array('class' => 'form-control mr-sm-2', 'placeholder' => 'Search For Events'));?>
            <button id="search_events" class="btn btn-outline-info my-2 my-sm-0" type="button">Search Events</button>
        </form>
    </div>
</div>
</nav>

<div class="container">
    <div class="wrapper p-3">
        <div class="row">
            <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-xs-12 mt-2 mb-3">
                <div class="card">
                    <div class="card-body">
                        <div class="card-title"><h3 style="font-size: 16px;">Up And Coming Events For </h3></div>
                        <ul class="list-unstyled event-home">
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-xl-3">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group">
                            <div class="advert">
                                <img data-src="holder.js/100px180" class="img-thumbnail">
                            </div>
                        </div>
                    </div>
                </div>
            </div>          
        </div>
        <div class="row">
            <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-xs-12 mt-3 mb-3">
            </div>
            <div class="col-xl-3">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group">
                            <div class="advert">
                                <img data-src="holder.js/100px180" class="img-thumbnail">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-3 mt-3">
                <img data-src="holder.js/100px180?theme=sky" class="img-thumbnail">
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="container">
    <div class="row">
        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12 mb-3">
            <h3>Information</h3>
            <hr>
            <ul class="list-unstyled">
                <li><a href="">Information</a></li>
                <li><a href="">About Us</a></li>
                <li><a href="">Contact Us</a></li>
                <li><a href="">Subscribe to News Letter</a></li>
            </ul>
        </div>
        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12 mb-3">
            <h3>Site</h3>
            <hr>
            <ul class="list-unstyled">
                <li><a href="">Events</a></li>
                <li><a href="">Sitemap</a></li>
                <li><a href="">Location</a></li>
                <li><a href="">Club Fee's</a></li>
            </ul>
        </div>
        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12 mb-3">

        </div>
    </div>
    </div>
</div>
</body>
</html>

更新

我在下面尝试了这个css，但它使线性渐变仅为半页：

html {
    height: 100%;

}

body {
    height: 100%;
    margin: 0;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c);
    background: -moz-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    background: -ms-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    background: -webkit-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    background: -webkit-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    background: -o-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    background:  linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
}

Answer 1

从主体到html，您似乎面临着background propagation所以您可以尝试通过添加此代码来确保身体至少达到全屏高度：

body {
  min-height: 100vh;
}

Answer 2

＆＃13;

html, body {
    min-height: 100% !important;
    max-width: auto;
    background-size: cover;
}

body {
    background: linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.header {
    background: #FFFFFF;
    width: 100%;
    padding: 2em;
}

.wrapper {
    background: #F0F0F0;
    min-height: 600px;
    border-radius: 0.5em;
}

@media (max-width: 968px) {
    .text-mobile {
        text-align: center !important;
    }
}

.card {
    box-shadow: 0 0 4px 0 rgba(0,0,0,.08), 0 2px 4px 0 rgba(0,0,0,.12);
    border-radius: 3px;
    background: #fff;
}

.card-title {
    padding-bottom: 20px;
    border-bottom: 1px solid #DEDEDE;
}

.bg-blue {
    background: #161e2c;

}

.nav-link {
    color: #fff !important;
}

@media (min-width: 768px) {
    .navbar-nav .nav-item {
        float: left;
        position: relative;
    }

    .navbar-nav .nav-item.active:after {
        border-bottom: 5px solid #0087e0;
        bottom: -8px;
        content: " ";
        left: 0;
        position: absolute;
        right: 0;
    }
}

.footer {
    border-top: 2px solid #0087e0;
    margin-top: 3em;
    background: #161e2c;
    width: 100%;
    padding: 2em;
    color: #fff !important;
}

.footer h3 {
    font-size: 18px;
    font-weight: bolder;
}

.footer a {
    text-decoration: none;
    color: #FFFFFF;
}

.footer hr{
   border: 1px solid #0087e0;
}

＆＃13;

尝试了这个并且它有效。

Answer 3

现在工作我将body css背景更改为background-image

html, body {
    min-height: 100%;
    margin:0;
}

body {
    background-image: linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c);
    background-image: -moz-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    background-image: -ms-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    background-image: -webkit-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    background-image: -webkit-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    background-image: -o-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
    background-image:  linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
}

线性渐变在身体标记

更新

3 个答案: